当前位置：文江博客话题详情

vue+sass实现换肤功能

发布于 2022-09-11 15:20:56 字数 126 浏览 8 评论 0

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

李白 2022-09-18 15:20:56

我用自定义属性的办法解决了这个问题
@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;
  }
}

回复收藏 0

懷念過去 2022-09-18 15:20:56

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

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

你可以参照一下

回复收藏 0

掐死时间 2022-09-18 15:20:56

为什么搞得这么复杂啊.
都要通过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>

回复收藏 0

~没有更多了~