基于vue3的样式绑定解决方案

前言

​ 在完成组件样式编辑器之后，在测试的过程中发现要是想将配置的组件样式进行复用，可以通过粘贴复制组件来实现，不过这就有一个问题，此样式不能应用到已存在的画布中的组件上，并且不能应用到其他组件上，要是想要配置相同样式还需要一点点修改配置，这就在让样式配置很头疼了。
在这时看到了阿里的lowcode-engine，在其源码面板处有index.css配置，可以通过类名进行与组件的绑定。发现这正是我想要的效果，通过这种编写.css，进行类名的绑定，可以灵活运用到画布中的组件上，省去了一个个编写组件样式的麻烦，解决方案有了那就开干！
项目源码地址要是觉着有意思的化，不妨留下一颗星

实现方式

​ 由于本项目使用的是vue框架，便想到可以通过v-html的方式来给页面增加

的方式完成class的绑定。

示例代码：

<div v-html="`<style>${css}</style>`"></div>

<component
    :class="item.bindClass"
/>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U3L3BXmf-1691121875032)(C:\Users\22866\Desktop\证件照\easycode\B000AF19-527F-4432-91BA-46C02C940D80.png)]

​ 可以看到已经实现了样式的动态绑定，至此心想这功能不就完成了！正高兴的时候突然想到v-html是将

样式污染的解决方案

iframe方案

​ 想到样式编辑的灵感来源于lowcode-engine，便想着去看看人家是怎么解决的这个问题，打开lowcode-engine 查看网页源码，发现他是在画布之上套了一层iframe这样编写的样式便不会污染到画布之外的地方。

​ 开始尝试，将画布组件注册到路由当中，通过iframe进行调用…，经过一系列的改造，测试一下双击画布中的组件发现组件编辑器没有响应，这一改造把原有的功能给干掉了，人麻了！排查原因，组件之间的数据互通是通过pinia的方式，画布页面是通过frame的方式嵌套在页面上，iframe 中的源pinia与外层页面的pinia数据不互通，要想互通还需要引入pinia的数据持久化，将pinia的数据保存到localStorage中进行数据的互通，考虑到会有多个页面，众多组件，执行效率等问题就没采用这个解决方案。

PostCSS方案

​ 在iframe方案pass后，开始重新思考解决方案，由于迟迟没想到解决方案，开发也不能卡在这个点上不是，在修改样式的时候注意到了vue的

安装PostCSS

npm install postcss

新建一个postcss-selector-add.js 用于实现属性选择器的绑定

import postcss from "postcss";
export const ecPostcss = postcss.plugin('postcss-selector-add', function (opts) {
    return function (root, result) {
        
        root.walkRules(function (rule) {
            rule.selector =  `${selectorValue} ${rule.selector}`
        });
    };
});
let selectorValue =''
export function setAttr(attr,value){
    if(attr && value){
        selectorValue = `[${attr}="${value}"]`
    }
}

调用

import postcss from "postcss";
import {ecPostcss} from "@/utils/postcss-selector-add";

postcss(ecPostcss).process('源css文本').then(result => {
  that.cssfinal = result.css
})

在画布上增加特定的标识属性，便可进行样式隔离，至此样式绑定功能完成！

​ 由于本人对PostCSS的使用只是皮毛，在此就不细讲PostCSS了，大家想要学习可以搜索PostCSS的官网，或者站内也有不少写PostCSS相关的博客。

由于本人对PostCSS的使用只是皮毛，在此就不细讲PostCSS了，大家想要学习可以搜索PostCSS的官网，或者站内也有不少写PostCSS相关的博客。