this.variableList = list
// 存储到vuex
this.$store.commit('updateVariableList', this.variableList)
} catch (error) {
console.log(error)
}
}
merge方法就是遍历合并对应变量key的值，主要看
replaceVariable方法：
function replaceVariable(data, types) {
// 遍历整体变量列表
for(let i = 0; i < data.length; i++) {
let arr = data[i].config
// 遍历某个类别下的变量列表
for(let j = 0; j < arr.length; j++) {
// 如果不在替换类型范围内的和值不是变量的话就跳过
if (!types.includes(arr[j].type) || !checkVariable(arr[j].value)) {
continue
}
// 替换处理
arr[j].value = findVariableReplaceValue(data, arr[j].value) || arr[j].value
}
}
return data
}findVariableReplaceValue方法通过递归进行查找：
function findVariableReplaceValue(data, value) {
for(let i = 0; i < data.length; i++) {
let arr = data[i].config
for(let j = 0; j < arr.length; j++) {
if (arr[j].key === value) {
// 如果不是变量的话就是最终的值，返回就好了
if (!checkVariable(arr[j].value)) {
return arr[j].value
} else {// 如果还是变量的话就递归查找
return findVariableReplaceValue(data, arr[j].value)
}
}
}
}
}接下来是具体的控件显示逻辑，根据当前编辑中的类型对应的配置数据进行渲染，模板如下：
// Editor组件
<template>
<div class="editorContainer">
<div class="editorBlock" v-for="items in data" :key="items.name">
<div class="editorBlockTitle">{{items.name}}</div>
<ul class="editorList">
<li class="editorItem" v-for="item in items.list" :key="item.key">
<div class="editorItemTitle">{{parseName(item.key)}}</div>
<Control :data="item" @change="valueChange"></Control>
</li>
</ul>
</div>
</div>
</template>data是对应变量类型里的config数据，是个计算属性：
{
computed: {
data() {
// 找出当前编辑中的变量类别
let _data = this.$store.state.variableList.find(item => {
return item.name === this.$store.state.editingActionType
})
if (!_data) {
return [] }
let config = _data.config
// 进行分组
let categorys = [] config.forEach(item => {
let category = categorys.find(c => {
return c.name === item.category
})
if (!category) {
categorys.push({
name: item.category,
list: [item] })
return false
}
