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

表单设计器designer-config属性新增toolbarMinWidth参数，可配置工具按钮栏最小宽度。

master
vdpAdmin 2022-01-28 10:14:21 +08:00
parent 34f4e3104b
commit 00d705f854
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/form-designer/index.vue
View File

@ -116,6 +116,7 @@
exportCodeButton: true, //是否显示导出代码按钮 exportCodeButton: true, //是否显示导出代码按钮
generateSFCButton: true, //是否显示生成SFC按钮 generateSFCButton: true, //是否显示生成SFC按钮
toolbarMaxWidth: 420, //设计器工具按钮栏最大宽度（单位像素） toolbarMaxWidth: 420, //设计器工具按钮栏最大宽度（单位像素）
toolbarMinWidth: 300, //设计器工具按钮栏最小宽度（单位像素）
presetCssCode: '', //设计器预设CSS样式代码 presetCssCode: '', //设计器预设CSS样式代码
} }

11
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" :style="{width: toolbarWidth + 'px'}">
<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>
@ -192,7 +192,7 @@
return { return {
designerConfig: this.getDesignerConfig(), designerConfig: this.getDesignerConfig(),
toolBarWidth: 420, toolbarWidth: 420,
showPreviewDialogFlag: false, showPreviewDialogFlag: false,
showImportJsonDialogFlag: false, showImportJsonDialogFlag: false,
showExportJsonDialogFlag: false, showExportJsonDialogFlag: false,
@ -272,13 +272,14 @@
}, },
mounted() { mounted() {
let maxTBWidth = this.designerConfig.toolbarMaxWidth let maxTBWidth = this.designerConfig.toolbarMaxWidth || 420
let minTBWidth = this.designerConfig.toolbarMinWidth || 300
let newTBWidth = window.innerWidth - 260 - 300 - 320 - 80 let newTBWidth = window.innerWidth - 260 - 300 - 320 - 80
this.toolBarWidth = newTBWidth >= maxTBWidth ? maxTBWidth : (newTBWidth <= 300 ? 300 : newTBWidth) this.toolbarWidth = newTBWidth >= maxTBWidth ? maxTBWidth : (newTBWidth <= minTBWidth ? minTBWidth : newTBWidth)
addWindowResizeHandler(() => { addWindowResizeHandler(() => {
this.$nextTick(() => { this.$nextTick(() => {
let newTBWidth2 = window.innerWidth - 260 - 300 - 320 - 80 let newTBWidth2 = window.innerWidth - 260 - 300 - 320 - 80
this.toolBarWidth = newTBWidth2 >= maxTBWidth ? maxTBWidth : (newTBWidth2 <= 300 ? 300 : newTBWidth2) this.toolbarWidth = newTBWidth2 >= maxTBWidth ? maxTBWidth : (newTBWidth2 <= minTBWidth ? minTBWidth : newTBWidth2)
}) })
}) })
}, },