github
/
variant-form
mirror of https://github.com/vform666/variant-form
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

操作栏样式调整

pull/22/head
Mercutio 2023-04-10 13:47:50 +08:00
parent fac2664e4c
commit 9910dd666c
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -2,7 +2,7 @@
<div id="app"> <div id="app">
<VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig" :global-dsv="globalDsv"> <VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig" :global-dsv="globalDsv">
<template #customToolButtons> <template #customToolButtons>
<el-button type="text" @click="printFormJson">测试按钮</el-button> <el-button type="primary" @click="printFormJson">测试按钮</el-button>
</template> </template>
</VFormDesigner> </VFormDesigner>
</div> </div>

22
src/components/form-designer/toolbar-panel/index.vue
View File

@ -23,7 +23,7 @@
icon-class="el-icon-arrow-right" @node-click="onNodeTreeClick"></el-tree> icon-class="el-icon-arrow-right" @node-click="onNodeTreeClick"></el-tree>
</el-drawer> </el-drawer>
<div class="right-toolbar" :style="{width: toolbarWidth + 'px'}"> <div class="right-toolbar">
<div class="right-toolbar-con"> <div class="right-toolbar-con">
<el-button v-if="showToolButton('clearDesignerButton')" type="text" @click="clearFormWidget"> <el-button v-if="showToolButton('clearDesignerButton')" type="text" @click="clearFormWidget">
<i class="el-icon-delete" />{{i18nt('designer.toolbar.clear')}}</el-button> <i class="el-icon-delete" />{{i18nt('designer.toolbar.clear')}}</el-button>
@ -695,24 +695,30 @@
<style lang="scss" scoped> <style lang="scss" scoped>
div.toolbar-container { div.toolbar-container {
//min-width: 728px; /* 解决工具按钮栏换行的问题 */ display: flex;
/* 上一行css有问题，当窗口宽度不足时会把按钮挤出到右边的属性设置区，弃之！ */ align-items: center;
justify-content: space-between;
overflow: hidden;
height: 100%;
} }
.left-toolbar { .left-toolbar {
float: left; display: flex;
flex-shrink: 1;
font-size: 16px; font-size: 16px;
} }
.right-toolbar { .right-toolbar {
float: right; margin-left: 10px;
//width: 420px; flex-shrink: 0;
text-align: right; text-align: right;
overflow: hidden; overflow: hidden;
.right-toolbar-con { .right-toolbar-con {
text-align: left; display: flex;
width: 600px; align-items: center;
justify-content: flex-end;
// min-width: 600px;
} }
::v-deep .el-button--text { ::v-deep .el-button--text {