VUE实现Studio管理后台(十):OptionBox,一个综合属性输入界面,可以级联重置
为了便于阅读代码,已经把测试数据分离出来,放在了mock目录下:
阅读代码的话,稍微留意一下就好。本次介绍RXEditor界面最重要的部分,属性输入组件,该组件可以显示是否有数据被修改,还可以批量重置到缺省值,效果如下:
这个界面是动态构建的,根据Json数据,动态构建输入界面。我之前做过一个PHP larvel+Vuetify的框架,也是用这个原理,PHP段代码构造JSON数据,VUE代码根据数据动态构造输入界面。我用那个框架做了好几个网站和公司自己的订单管理系统,但是代码需要优化的地方不少,我自己用起来很方便,离开源发布还有些距离,框架的名字叫Vular,GIthub地址:https://github.com/vularsoft/vular,感兴趣的可以看看,等完成RXEditor,就继续这个框架,给自己加的工作太多了,时间不够。
本次实现的要比这个框架简单好多,原理相同。要理解代码,需要明白页面元素的结构及命名:
整个输入组件叫OptionBox,这个控件可以输入各种属性。OptionBox下包含若干OptionGroup,每个OptionGroup就是一个手风琴折叠的子项,OptionBox是一个手风琴式折叠控件(该控件的实现方式,请参看以前的文章),OptionGroup下包含多个RxInputRow,每个RxInputRow包含一个输入控件跟一个标签,OptionBox根据Json数据动态构建,Json数据结构如下:
[ { label:'Row选项', rows:[ { label:'Gutters', value:'no-gutters', defaultValue:'no-gutters', inputName:'RxSwitch', props:{ onValue:'no-gutters', offValue:'', }, }, { label:'测试', value:'off', defaultValue:'off', inputName:'RxSwitch', props:{ onValue:'on', offValue:'off', }, }, ], }, { label:'文本选项', rows:[ { label:'测试3', value:'no-gutters', defaultValue:'no-gutters', inputName:'RxSwitch', props:{ onValue:'no-gutters', offValue:'', }, }, { label:'测试4', value:'off', defaultValue:'off', inputName:'RxSwitch', props:{ onValue:'on', offValue:'off', }, }, ], }, { label:'Bootstrap工具', }, ]
到目前为止,我们只实现了一个输入控件:RxSwitch,所以测试数据中只有这一个控件,后面会逐步添加下拉列表等其它控件,到时也会更新测试数据。
代码目录结构:
Inputs目录下的RXSwitch.vue是以前实现的,RXSelect.vue只是个备忘文件,下次实现。accordion目录下是以前实现的手风琴式折叠组件,这次要用到。剩下的文件就是本次要实现的。
老习惯,先看OptionBox的调用代码,看看如何使用这个组件:
<OptionBox v-model="options"></OptionBox>
非常简单,用v-model的方式传入一个json数据。它的实现代码:
<template> <SimpleAccordion> <OptionGroup v-for="(optionGroup, i) in inputValue" :key="i" v-model="inputValue[i]"> </OptionGroup> </SimpleAccordion> </template> <script> import SimpleAccordion from '../accordion/SimpleAccordion.vue' import OptionGroup from './OptionGroup.vue' export default { name: 'OptionBox', components:{ SimpleAccordion, OptionGroup }, props:{ value:{ default:[] }, }, computed:{ inputValue: { get:function() { return this.value; }, set:function(val) { this.$emit('input', val); }, }, }, methods: { }, } </script>
使用一个SimpleAccordion(手风琴式折叠组件)实现,内部循环调用OptionGroup。给OptionGroup传入的v-model,是一个row数据列表。它的实现代码:
<template> <CollapsibleItem class="option-item" @itemClick = "itemClick"> <template #heading> {{inputValue.label}} <div v-if="changed" class="reset-button" @click="resetAll">{{$t('widgets.reset')}}</div> </template> <template #body> <RxInputRow v-for="(row, i) in inputValue.rows" :key="i" :label = "row.label" :inputName = "row.inputName" :inputProps = "row.props" :defaultValue = "row.defaultValue" v-model = "row.value" > </RxInputRow> </template> </CollapsibleItem> </template> <script> import CollapsibleItem from '../accordion/CollapsibleItem.vue' import RxInputRow from '../inputs/RxInputRow.vue' export default { name: 'OptionGroup', components:{ CollapsibleItem, RxInputRow }, props:{ value:{ default:{} }, }, computed:{ inputValue: { get:function() { return this.value; }, set:function(val) { this.$emit('input', val); }, }, changed(){ for(var i in this.inputValue.rows){ let row = this.inputValue.rows[i] if(row.value !== row.defaultValue){ return true } } return false } }, methods: { itemClick(item){ this.$emit('itemClick', item) }, resetAll(event){ for(var i in this.inputValue.rows){ this.inputValue.rows[i].value = this.inputValue.rows[i].defaultValue } event.stopPropagation() } }, } </script> <style> .option-item.collapsible-item .item-heading{ display: flex; flex-flow: row; justify-content: space-between; } .reset-button{ margin-right:20px; color: #bbb; } </style>
它使用CollapsibleItem 实现,所以需要把CollapsibleItem 的事件通过$emit方法转发给父组件,要不然手风琴折叠就不灵了。
根据计算属性changed,确定是否显示重置按钮,如果有数据跟缺省值不一样,chenged就是true,反之为false。
重置按钮的处理事件resetAll,它把所有的值都设置成默认值。不得不感叹VUE双向数据绑定的强大,RXEditor第一个版本没有使用VUE,用的是原生JS,类似功能实现起来非常复杂。
样式随状态改变,具体参看CSS就好。
该组件循环调用RxInputRow ,注意他的传入参数。
RxInputRow 代码:
<template> <div class="rx-input-row" :class = "changed ? 'changed' :''"> <div class="label">{{label}}</div> <component :is = "inputName" v-bind = "inputProps" v-model = "inputValue" ></component> </div> </template> <script> import RxSwitch from './RxSwitch.vue' export default { name: 'RxInputRow', props:{ label:{ default:'' }, defaultValue:{ default:'' }, value:{ default:'' }, inputProps:{ default:'' }, inputName:{defalut:'input'}, }, components:{ RxSwitch, }, data () { return { } }, computed:{ changed(){ return this.inputValue !== this.defaultValue }, inputValue: { get:function() { return this.value; }, set:function(val) { this.$emit('input', val); }, }, }, methods: { }, } </script> <style> .rx-input-row{ display: flex; flex-flow: row; align-items: center; } .rx-input-row .label{ display: flex; height: 30px; align-items: center; padding-left: 6px; color:#c2c2c2; font-size: 12px; width: 100px; } .rx-input-row.changed .label{ color:#7c9161; } </style>
如果输入值有变化,也是通过changed计算属性通知界面,CSS用绿色字体显示标签。
通过VUE的component 动态绑定组件,可以省很多代码量,一定要记住的是,它使用的组件要注册。
这段代码:
<component :is = "inputName" v-bind = "inputProps" v-model = "inputValue" ></component>
就相当于
<RxSwitch v-if = "inputName === 'RxSwitch'" onValue= "inputProps.onValue" offValue= "inputProps.offValue" v-model = "inputValue" ></RxSwitch> <RxSelect v-if = "inputName === 'RxSelect'" list= "inputProps.list" v-model = "inputValue" ></RxSelect> ......
这样的方式,需要大量的if判断,代码不好看。我在Vular框架里,因为要通过PHP代码控制每一个Vuetify细节,component 动态组件,也有些不方便,我直接做了一个自定义组件,通过重写render方法实现,太深入底层了。在这里,能用这样的方式完美实现,已经很幸福了。
今天作文就写到这里,感谢耐心阅读,详细代码,请参考Github:https://github.com/vularsoft/studio-ui
若有有问题,请留言交流。
- 一个包含几种动物的小资料库,根据输入的动物属性要求可以输出对应的动物名称;如查询不到应当输出其他语句。利用Java语言实现
- 用vue+Element-ui写一个后台管理界面,点击头部导航对应显示下方左侧导航菜单,点击左侧菜单对应显示右边内容,点击右边内容的按钮出现一个新页面依旧能够选中左侧相应菜单,求解决???!!!!
- 【vue】介绍一个vuejs 和 element 搭建的一个后台管理界面
- 利用5个标签,4个文本框,2个按钮,自己设计布局实现输入三边求三角形面积。界面如下所示。三角形类的编写可以使用实验4中已经写过的三角形类,当点击“判断三边”时,若能构成三角形,在标签5上显示“可以构成三角形!”,如不能构成三角形,在标签5上显示“不能构成三
- JS 实现获取打开一个界面中输入的值
- vuejs 和 element 搭建的一个后台管理界面
- 50 个收费、漂亮、专业的后台管理界面风格(勤快点收费也可以搞下来的,你懂得)
- 设计一个JFrame窗口,输入学生的基本信息,包括学号、姓名、学院、专业(下拉列表)、班级、籍贯(级联)、性别(单选按钮)、爱好(多选)、备注等,在界面中包括提交和重填按钮。提交后弹出窗口显示学生信息
- 完成一个学生管理程序,使用学号作为键添加5个学生对象,并可以将全部信息保存在文件中,可以实现对学生信息的学号查找,输出全部学生信息的功能。
- JS 实现获取打开一个界面中输入的值
- 客运综合管理系统项目—登录界面的实现
- 请实现一个队列,既可以存放整数,又可以存放字符串。简单的说,队列是一种数据结构,按照先进先出的顺序管理进、出队列的元素
- 完成一个学生管理程序,使用学号作为键添加5个学生对象,并可以将全部信息保存在文件中,可以实现对学生信息的学号查找,输出全部学生信息的功能。
- vue2.0+element+node+webpack搭建的一个简单的后台管理界面
- JS 实现获取打开一个界面中输入的值
- 设计一个JFrame窗口,输入学生的基本信息,包括学号、姓名、学院、专业(下拉列表)、班级、籍贯(级联)、性别(单选按钮)、爱好(多选)、备注,在界面中包括提交和重填按钮。提交后弹出新窗口显示学生信
- 用C语言实现一个学生成绩管理系统 实现学生信息管理。包括:录入、查询、排序等功能。 要求: 用数据文件保存学生基本信息(学号 姓名 课程1 课程2 课程3…) ,利用菜单可以循环实现各个功能。
- c语言使用链表编写一个可以实现班级学生管理系统,增加,删除,修改学生信息
- VC++界面编程之--实现一个画板并提供文字输入功能(MsPaint)
- 编写一个多线程函数实现对数组排序,要求: 1.至少用两个线程 2.数组的元素值可以事先定义好,或者可以从键盘输入(增加一个线程)。 3.用一个线程对数组排序,用另一个线程输出排序结果。 4.保证先排好序,再输出。