hasBrackets = false
quene.push(item[i])
} else {// 其他字符直接添加到队列里
quene.push(item[i])
}
}
// 添加队列剩余的数据
farr.push(quene.join('').trim())
})
// 解析出单个属性
let list = [] farr.forEach(item => {
let colorRegs = [/#[a-zA-Z0-9]{3,6}$/, /rgba?([^()]+)$/gim, /hlsa?([^()]+)$/gim, /s+[a-zA-z]+$/] let last = ''
let color = ''
for (let i = 0; i < colorRegs.length; i++) {
let reg = colorRegs[i] let result = reg.exec(item)
if (result) {
color = result[0] last = item.slice(0, result.index)
break
}
}
let props = last.split(/s+/)
list.push({
xpx: parseInt(props[0]),
ypx: parseInt(props[1]),
spread: parseInt(props[2]) || 0,
blur: parseInt(props[3]) || 0,
color
})
})
this.list = list
}
回到Editor组件，编辑控件触发了修改事件后需要更新变量列表里面对应的值及对应主题列表里面的值，同时要发送编译请求：
// data是变量里config数组里的一项，value就是修改后的值
function valueChange(data, value) {
// 更新当前变量对应key的值
let cloneData = JSON.parse(JSON.stringify(this.$store.state.variableList))
let tarData = cloneData.find((item) => {
return item.name === this.$store.state.editingActionType
})
tarData.config.forEach((item) => {
if (item.key === data.key) {
item.value = value
}
})
// 因为是支持颜色值修改为某些变量的，所以要重新进行变量替换处理
cloneData = store.replaceVariable(cloneData, ['color'])
this.$store.commit('updateVariableList', cloneData)
// 更新当前主题
let curTheme = store.getUserThemeByNameFromStore(this.$store.state.editingTheme, true)
if (!curTheme) {// 当前是官方主题则创建新主题
let theme = store.createNewUserTheme('', {
[data.key]: value
})
this.$store.commit('updateEditingTheme', theme.name)
} else {// 修改的是自定义主题
curTheme.theme.common = {
...curTheme.theme.common,
[data.key]: value
}
store.updateUserTheme(curTheme.name, {
theme: curTheme.theme
})
}
// 请求编译
this.updateVariable()
}接下来是发送编译请求：
async function updateVariable() {
let curTheme = store.getUserThemeByNameFromStore(this.$store.state.editingTheme, true, true)
try {
let res = await api.updateVariable(curTheme.theme)
this.replaceTheme(res.data)
} catch (error) {
console.log(error)
}
}参数为当前主题修改的变量数据，后端编译完后返回css字符串，需要动态插入到head标签里：
function replaceTheme(data) {
