![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ivew
飞天代码
这个作者很懒,什么都没留下…
展开
-
ivew+vue实现表单设计器--实现tab多页签的拖拽添加(七)
前面实现了table表格的拖拽生成,这里记录下tab标签页的拖拽生成。直接上图:拖拽数据的准备import getTabPanelTemp from "./getTabPanelTemp";import GoingUtils from "../../../utils/goingUtils";export default { __config__: { layout: 'tabsItem', elTag: 'tabs', tagIcon: 'gf-tabs',原创 2020-12-21 13:22:30 · 1223 阅读 · 2 评论 -
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 · 551 阅读 · 0 评论 -
ivew+vue实现表单设计器--实现表格拖拽添加(五)
表单设计经常会碰到比较复杂的大表格,如果一行一行拖拽效率太低了,所以需要写个表格拖拽组件。最终效果大概就是根据输入的行和列生成后:核心功能有:1、双击进入编辑,输入文字,离开焦点完成输入,变成label2、设置字体、设置居左、居右、居中、改变背景色、改变字体颜色、加粗等3、通过拖拽调整表格和宽度和高度4、选中多列、多行进行合并、拆分操作5、可以插入行、插入列6、设置边框显示、以及边框粗细以及边框颜色等。7、每个单元格都可以拖拽其他组件进入生成...原创 2020-11-29 12:25:56 · 1353 阅读 · 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 · 506 阅读 · 0 评论 -
ivew+vue实现表单设计器--前进后退操作(三)
操作前进、后退操作,这个功能比较重要,而且必须提前设计后,不然后面再来兼容这个功能就比较麻烦。这里只对dom的增加、删除等渲染进行前进、后退操作,考虑到web到性能,不对属性操作进行前进、后退。添加组件,后退数组操作点击后退,堆栈操作点击前进,逆向操作堆栈而已。第一步申明了2个数组,1个对象映射对象 data() { return { forwardList:[], backwardList:[], objMap:{},原创 2020-11-23 17:20:10 · 483 阅读 · 0 评论 -
ivew+vue实现表单设计器--拖拽增加、点击添加(二)
上一节讲了界面布局,这节主要介绍点击控件进行添加、拖拽控件进行添加。首先介绍下实现表单绘制的原理:所以不管是点击添加还是拖拽添加,其实都是向绘制list里面添加组件对象而已。申明绘制list data() { return { drawingList: [], } },点击组件进行添加:这个简单,就是注册click事件,点击的时候将组件对象追加到绘制list里面 <div v-for="(原创 2020-11-23 00:59:35 · 1222 阅读 · 0 评论 -
ivew+vue实现表单设计器---框架界面搭建(一)
网上有个基于element-ui的开源表单设计器,但目前我手头的项目都是基于ivew和自己封装的goingui控件库,由于组件不一样,加上开源的设计器功能还没达到预期,故打算从0 开始打造一个基于vue的表单设计器。第一步:工程搭建采用的vue2.*+ivew来进行开发,具体搭建就不写了。第二步:界面框架搭建采用左中右的方式来展示,直接上图:左边是控件区域,中间是组件展示效果区域,右边是组件属性查看,修改区域。这节没有啥特殊的难点,基本都是采用现成的组件,只是换了下图标或者下拉内容,而已。第原创 2020-11-21 10:52:04 · 1927 阅读 · 4 评论