VUECombat10：OptionBox，综合属性输入界面，可级联和重置，管理后台的admin

为了方便阅读代码，将测试数据分离出来放在了mock目录下：如果你阅读代码，注意一下就好了。本次介绍RXEditor界面中最重要的部分，属性输入组件。该组件可以显示数据是否被修改，也可以批量重置为默认值。效果如下：这个接口是动态构建的，基于Json数据。输入接口。之前做过一个PHPlarvel+Vuetify的框架，也是用的这个原理。PHP段代码构造JSON数据，VUE代码根据数据动态构造输入界面。我用那个框架做了几个网站和公司自己的订单管理系统，但是代码需要优化很多。我自己用起来很方便，离源码发布还有一段距离。框架名称为Vular，Github地址：https://github.com/vularsoft/vular，有兴趣的可以看看。完成RXEditor后，继续这个框架。自己的工作太多，时间不够。这次的实现比这个框架简单多了，原理也是一样的。要看懂代码，需要了解页面元素的结构和命名：整个输入组件叫做OptionBox，这个控件可以输入各种属性。OptionBox下有几个OptionGroup，每个OptionGroup是手风琴折叠的一个子项，OptionBox是一个手风琴式的折叠控件（这个控件的实现可以参考上一篇文章），OptionGroup包含多个RxInputRow，每个RxInputRow包含一个input控件，后面是一个label，OptionBox是根据Json数据动态构建的。Json数据结构如下：[{label:'Rowoption',rows:[{label:'Gutters',value:'no-gutters',defaultValue:'no-gutters',inputName:'RxSwitch',props:{onValue:'no-gutters',offValue:'',},},{label:'test',value:'off',defaultValue:'off',inputName:'RxSwitch',props:{onValue:'on',offValue:'off',},},],},{label:'TextOptions',rows:[{label:'Test3',value:'no-gutters',defaultValue:'no-gutters标签：'测试3'，值：'no-gutters'，defaultValue：'no-gutters',inputName:'RxSwitch',props:{onValue:'no-gutters',offValue:'',},},{label:'Test4',value:'off',defaultValue:'off',inputName:'接收开关',props:{onValue:'on',offValue:'off',},},]],},{label:'BootstrapTools',},]到目前为止，我们只实现了一个输入控件：RxSwitch，所以测试有数据中只有这一个控件，后面会逐步添加下拉列表等其他控件，届时会更新测试数据代码目录结构：之前实现了Inputs目录下的RXSwitch.vue，以及RXSelect.vue只是一个备忘录文件。执行。accordion目录下是之前实现的手风琴式的折叠组件，这次要用到。其余文件将在本次实施。老习惯了，先看OptionBox的调用代码，看看这个组件怎么用：很简单，用v-model传入一个json数据。其实现代码：使用SimpleAccordion（手风琴式折叠组件）实现，内部循环调用OptionGroup。传递给OptionGroup的v-model是一个行数据列表。它的实际代码：是使用CollapsibleItem实现的，所以CollapsibleItem的事件需要通过$emit方法转发给父组件，否则手风琴不会起作用。根据改变的计算属性，判断是否显示重置按钮，如果是数据与默认值不同，cheng为true，否则为false。重置按钮处理事件resetAll，将所有值设置为默认值。不得不感叹VUE双向数据绑定的强大。RXEditor的第一个版本没有使用VUE，而是原生的JS。实现类似的功能非常复杂。样式随状态变化，具体参考CSS。组件循环调用RxInputRow，注意它传入的参数。RxInputRow代码：如果输入值发生变化，也会通过变化的计算属性通知接口。CSS将标签显示为绿色字体，通过VUE的组件动态绑定组件，可以节省大量代码。必须记住，它是Components用来注册的。这段代码：等同于……这个方法需要很多if判断，代码不好看。我在Vular框架下，因为不方便通过PHP代码控制每一个Vuetify细节和component动态组件，直接做了一个自定义组件，通过重写render方法实现，太深入底层了。在这里，能够以这种方式完美的实现，已经是很幸福了。今天的作文到此结束，感谢大家耐心阅读，详细代码参考Github：https://github.com/vularsoft/studio-ui，有问题欢迎留言交流。