為了便于閱讀代碼，已經把測驗資料分離出來，放在了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
若有有問題，請留言交流，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/143982.html
標籤：JavaScript