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
若有有問題，請留言交