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, //是否显示导出代码按钮
generateSFCButton: true, //是否显示生成SFC按钮
toolbarMaxWidth: 420, //设计器工具按钮栏最大宽度（单位像素）
toolbarMinWidth: 300, //设计器工具按钮栏最小宽度（单位像素）
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>
</el-drawer>
<div class="right-toolbar" :style="{width: toolBarWidth + 'px'}">
<div class="right-toolbar" :style="{width: toolbarWidth + 'px'}">
<div class="right-toolbar-con">
<el-button v-if="showToolButton('clearDesignerButton')" type="text" @click="clearFormWidget">
<i class="el-icon-delete" />{{i18nt('designer.toolbar.clear')}}</el-button>
@ -192,7 +192,7 @@
return {
designerConfig: this.getDesignerConfig(),
toolBarWidth: 420,
toolbarWidth: 420,
showPreviewDialogFlag: false,
showImportJsonDialogFlag: false,
showExportJsonDialogFlag: false,
@ -272,13 +272,14 @@
},
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
this.toolBarWidth = newTBWidth >= maxTBWidth ? maxTBWidth : (newTBWidth <= 300 ? 300 : newTBWidth)
this.toolbarWidth = newTBWidth >= maxTBWidth ? maxTBWidth : (newTBWidth <= minTBWidth ? minTBWidth : newTBWidth)
addWindowResizeHandler(() => {
this.$nextTick(() => {
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)
})
})
},