vue组件库的在线主题编辑器的实现思路
167 浏览量
2020-11-21
03:17:08
上传
评论
收藏 228KB PDF 举报
vue组件库的在线主题编辑器的实现思路组件库的在线主题编辑器的实现思路
一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题，但是主题定制需求永远都存在，所以组件库一般
都会允许使用者自定义主题，我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的，新体系下
还做到了动态换肤，因为皮肤本质上是一种静态资源（CSS文件和字体文件），所以只需要约定一种方式来每次动态请求加
载不同的文件就可以了，为了方便这一需求，还配套开发了一个Vessel脚手架的插件，只需要以配置文件的方式列出你需要修
改的变量和值，一个命令就可以帮你生成对应的皮肤。
但是目前的换肤还存在几个问题， 一是不直观，无法方便实时的看到修改后的组件效果，二是建议修改的变量比较少，这很
大原因也是因为问题一，因为不直观所以盲目修改后的效果可能达不到预期。
针对这几个问题，所以实现一个在线主题编辑器是一个有意义的事情，目前最流行的组件库之一的Element就支持主题在线编
辑，地址：element.eleme.cn/#/zh-CN/the… ，本项目是在参考了Element的设计思想和界面效果后开发完成的，本文将开发
思路分享出来，如果有一些不合理地方或有一些更好的实现方式，欢迎指出来一起讨论。
实现思路实现思路
主题在线编辑的核心其实就是以一种可视化的方式来修改主题对应scss变量的值。
项目总体分为前端和后端两个部分，前端主要负责管理主题列表、编辑主题和预览主题，后端主要负责返回变量列表和编译主
题。
后端返回主题可修改的变量信息，前端生成对应的控件，用户可进行修改，修改后立即将修改的变量和修改后的值发送给后
端，后端进行合并编译，生成css返回给前端，前端动态替换style标签的内容达到实时预览的效果。
主题列表页面主题列表页面
主题列表页面的主要功能是显示官方主题列表和显示自定义主题列表。
官方主题可进行的操作有预览和复制，不能修改，修改的话会自动生成新主题。自定义主题可以编辑和下载，及进行修改名
称、复制、删除操作。
官方主题列表后端返回，数据结构如下：
{
name: '官方主题-1', // 主题名称
by: 'by hui', // 来源
description: '默认主题', // 描述
theme: {
// 主题改动点列表
common: {
'$--color-brand': '#e72528'
}
}
}
自定义主题保存在localstorage里，数据结构如下：
{
name: name, // 主题名称
update: Date.now(), // 最后一次修改时间
theme: { // 主题改动点列表
common: {
//...
}
}
}
复制主题即把要复制的主题的theme.common数据复制到新主题上即可。
需要注意的就是新建主题时要判断主题名称是否重复，因为数据结构里并没有类似id的字段。另外还有一个小问题是当预览官
方主题时修改的话会自动生成新主题，所以还需要自动生成可用的主题名，实现如下：
const USER_THEME_NAME_PREFIX = '自定义主题-';
function getNextUserThemeName() {
let index = 1
// 获取已经存在的自定义主题列表
let list = getUserThemesFromStore()
let name = USER_THEME_NAME_PREFIX + index
let exist = () => {
return list.some((item) => {
return item.name === name
剩余10页未读，继续阅读
评论0