爲了便於閱讀代碼,已經把測試數據分離出來,放在了 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
若有有問題,請留言交流。