分享最实用的技术,创造更大的价值

基于vue和scss采用uniapp开发主题皮肤更换的实现

基于vue和scss采用uniapp开发主题皮肤更换的实现

小程序开发过程中,基于Vue如何使用scss实现换肤(更换主题)功能的开发?


创软小程序开发团队经过梳理后简单整理如下。


首先,.scss 文件申明如下


$color-primary:#fa436a; /* 主题颜色 */
$color-primary-green:green; /* 更换的颜色 */
$color-primary-blue:blue; /* 更换的颜色 */


@mixin color_primary($color){/*通过该函数设置字体颜色,后期方便统一管理;*/
  color:$color;
  
  [data-theme="green"] & {
    color:$color-primary-green;
  }
  [data-theme="blue"] & {
    color:$color-primary-blue;
  }
  
}


/* 更换背景颜色采用上面一样的逻辑 */



其次,在页面引用中的代码

.price{
    /*color: $color-primary;*/  /* 原始引用方式,错误 */
    @include color_primary($color-primary); /* 采用函数调用 */
}


最后,在js中设置更换皮肤

window.document.documentElement.setAttribute('data-theme', 'green'); /* */


Vue中如何使用scss实现换肤功能的主要原理


通过设置html的attribute属性在封装的函数中进行判断,进行相应的设置不同的颜色


css中 [ ] 可以识别到在html标签上设置的属性,所以在html上对应属性发生变化时,就会执行相应的样式,


这一步有点类似于平时给div添加一个.active属性,css自动执行相应样式。



联系
QQ
电话
咨询电话:189-8199-7898
TOP