表单配置中使用vue实现简单逻辑条件输入框
2022-03-16 本文已影响0人
纪念逝去的流年_1c1c
主要实现将逻辑符和逻辑控件渲染在输入框中并且可以做到增删查改。
1.输入框template代码：
主要搭配contenteditable属性实现div可输入，通过控制conditionalHtml对象实现各种添加条件的插入渲染。
template代码
2.methods方法逻辑
addHtml方法 通过控制conditionalHtml对象中的html（条件属性）和normalText（普通属性）来实现各种条件的插入，getHtmlList方法获取输入值判断是否为条件属性和普通属性（或者普通文本输入）分别以html（条件属性）和normalText（普通属性）插入list数组中返回。
主要实现逻辑
3.默认渲染文本框
props中定义defaultHtml数组，在created时深克隆赋值。
默认赋值示例
4.css样式较简单故省略
5.最后效果图：
效果图
