表单设计器designer-config属性新增toolbarMinWidth参数,可配置工具按钮栏最小宽度。
parent
34f4e3104b
commit
00d705f854
|
@ -116,6 +116,7 @@
|
||||||
exportCodeButton: true, //是否显示导出代码按钮
|
exportCodeButton: true, //是否显示导出代码按钮
|
||||||
generateSFCButton: true, //是否显示生成SFC按钮
|
generateSFCButton: true, //是否显示生成SFC按钮
|
||||||
toolbarMaxWidth: 420, //设计器工具按钮栏最大宽度(单位像素)
|
toolbarMaxWidth: 420, //设计器工具按钮栏最大宽度(单位像素)
|
||||||
|
toolbarMinWidth: 300, //设计器工具按钮栏最小宽度(单位像素)
|
||||||
|
|
||||||
presetCssCode: '', //设计器预设CSS样式代码
|
presetCssCode: '', //设计器预设CSS样式代码
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue