表单配置中使用vue实现简单逻辑条件输入框

主要实现将逻辑符和逻辑控件渲染在输入框中并且可以做到增删查改。

1.输入框template代码:

  主要搭配contenteditable属性实现div可输入,通过控制conditionalHtml对象实现各种添加条件的插入渲染。

template代码

2.methods方法逻辑

  addHtml方法 通过控制conditionalHtml对象中的html(条件属性)和normalText(普通属性)来实现各种条件的插入,getHtmlList方法获取输入值判断是否为条件属性和普通属性(或者普通文本输入)分别以html(条件属性)和normalText(普通属性)插入list数组中返回。

主要实现逻辑

3.默认渲染文本框

props中定义defaultHtml数组,在created时深克隆赋值。

默认赋值示例

4.css样式较简单故省略

5.最后效果图:

效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容