表单设计
飞天代码
这个作者很懒,什么都没留下…
展开
-
ivew+vue实现表单设计器--不同控件展示不同属性(六)
这个实现比较简单,就是根据点击的相应对象显示该对象的属性设置比如点击textarea:比如点击下拉控件:<template> <div class="right-board"> <Tabs value="ctlProp" style="height:calc(100% - 2px)"> <TabPane label="组件属性" name="ctlProp" style="height:calc(100% - 40px);overf原创 2020-12-12 10:27:04 · 562 阅读 · 0 评论 -
ivew+vue实现表单设计器--实现表格拖拽添加(五)
表单设计经常会碰到比较复杂的大表格,如果一行一行拖拽效率太低了,所以需要写个表格拖拽组件。最终效果大概就是根据输入的行和列生成后:核心功能有:1、双击进入编辑,输入文字,离开焦点完成输入,变成label2、设置字体、设置居左、居右、居中、改变背景色、改变字体颜色、加粗等3、通过拖拽调整表格和宽度和高度4、选中多列、多行进行合并、拆分操作5、可以插入行、插入列6、设置边框显示、以及边框粗细以及边框颜色等。7、每个单元格都可以拖拽其他组件进入生成...原创 2020-11-29 12:25:56 · 1388 阅读 · 1 评论 -
ivew+vue实现表单设计器--jsx操作细节(四)
中间表单显示区域采用的render+jsx方式来进行渲染,因为组件是多样的,如果采用传统写法则需要写大量的v-if、v-else来进行判断,而且扩展起来不方便。jsx的写法例子:这段代码的作用就是双击变成input输入框,离开焦点实现数据的编写。 colLabelTitle(h, currentItem, index, list) { const { activeItem } = this.$listeners const config = currentItem.__config__原创 2020-11-23 21:24:34 · 535 阅读 · 0 评论 -
ivew+vue实现表单设计器--前进后退操作(三)
操作前进、后退操作,这个功能比较重要,而且必须提前设计后,不然后面再来兼容这个功能就比较麻烦。这里只对dom的增加、删除等渲染进行前进、后退操作,考虑到web到性能,不对属性操作进行前进、后退。添加组件,后退数组操作点击后退,堆栈操作点击前进,逆向操作堆栈而已。第一步申明了2个数组,1个对象映射对象 data() { return { forwardList:[], backwardList:[], objMap:{},原创 2020-11-23 17:20:10 · 521 阅读 · 0 评论