vue+sass实现换肤功能

1 需求: 根据所选的主题色,自动切换当前的主题
2 想法: 我用sass做了mixin, 根据不同的传参来改变颜色,但现在也是我css传什么值,他就显示什么算是写死的,我如果将js选中的值传入在css引入的mixin中?请教各位。

回答:

为什么搞得这么复杂啊.
都要通过js去操作了 直接改变不就好了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            font-size: var(--fonts-size);
            background: var(--backgroundColor)
        }
    </style>
</head>
<body>
        <div class="box">111111111111111111</div>
    <script>
        

    var  box =  document.querySelector('.box');
    box.style.setProperty('--fonts-size', "50px")
    box.style.setProperty('--backgroundColor', "red")


    </script>
</body>
</html>

回答:

我用自定义属性的办法解决了这个问题
@mixin font_color ($color){
  color: $color;  //这是默认值
  [data-theme="theme1"] & {
    color: $color-theme1; // 匹配属性的字段,一样就覆盖上面的。js中进行属性的值的改写
  }
  [data-theme="theme2"] & {
    color: $color-theme2;
  }
  [data-theme="theme3"] & {
    color: $color-theme3;
  }
}

回答:

参照这个项目
我们想项目 我就是参照这个项目里面的自定义换肤做的.
它里面有两种换肤方法:

  • element-ui 的一种
  • 它项目中自己写的一种

你可以参照一下

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注