category.list.push(item)
})
return categorys
}
}
}
Control是具体的控件显示组件，某个变量具体是用输入框还是下拉列表都在这个组件内进行判断，核心是使用component动态组件：
// Control组件
<template>
<div class="controlContainer">
<component :is="showComponent" :data="data" :value="data.value" @change="emitChange" :extraColorList="extraColors"></component>
</div>
</template>
<script>
// 控件类型映射
const componentMap = {
color: 'ColorPicker',
select: 'Selecter',
input: 'Inputer',
shadow: 'Shadow',
fontSize: 'Selecter',
fontWeight: 'Selecter',
fontLineHeight: 'Selecter',
borderRadius: 'Selecter',
height: 'Inputer',
padding: 'Inputer',
width: 'Inputer'
}
{
computed: {
showComponent() {
// 根据变量类型来显示对应的控件
return componentMap[this.data.type] }
}
}
</script>一共有颜色选择组件、输入框组件、选择器组件、阴影编辑组件，具体实现很简单就不细说了，大概就是显示初始传入的变量，然后修改后触发修改事件change，经Control组件传递到Editor组件，在Editor组件上进行变量修改及发送编译请求，不过其中阴影组件的实现折磨了我半天，主要是如何解析阴影数据，这里用的是很暴力的一种解析方法，如果有更好的解析方式的话可以留言进行分享：
// 解析css阴影数据
// 因为rgb颜色值内也存在逗号，所以就不能简单的用逗号进行切割解析
function parse() {
if (!this.value) {
return false
}
// 解析成复合值数组
// let value = "0 0 2px 0 #666,0 0 2px 0 #666, 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 hlsa(0, 0, 0, 0.12),0 2px 4px 0 #sdf, 0 2px 4px 0 hlsa(0, 0, 0, 0.12), 0 2px 0 hlsa(0, 0, 0, 0.12), 0 2px hlsa(0, 0, 0, 0.12), 0 2px 4px 0 hlsa(0, 0, 0, 0.12)"
// 根据右括号来进行分割成数组
let arr = this.value.split(/)s*,s*/gim)
arr = arr.map(item => {
// 补上右括号
if (item.includes('(') && !item.includes(')')) {
return item + ')'
} else {// 非rgb颜色值的直接返回
return item
}
})
let farr = [] arr.forEach(item => {
let quene = [] let hasBrackets = false
// 逐个字符进行遍历
for (let i = 0; i < item.length; i++) {
// 遇到非颜色值内的逗号直接拼接目前队列里的字符添加到数组
if (item[i] === ',' && !hasBrackets) {
farr.push(quene.join('').trim())
quene = [] } else if (item[i] === '(') {//遇到颜色值的左括号修改标志位
hasBrackets = true
quene.push(item[i])
} else if (item[i] === ')') {//遇到右括号重置标志位
