vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解(干货)

方式1:定义全局的CSS变量

App.vue:

demo.vue(css):

demo.vue(html):

    

换肤 / 切换样式主题 方式1:

我是一个可以换肤的div

demo.vue(js):

效果:

vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解(干货)_第1张图片

方式2:切换已定义好的css文件

Public/css/theme_1.css:

.myButton2{
  background: Moccasin;
}
.myDiv2 {
  background: Moccasin;
}

vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解(干货)_第2张图片

App.vue:

demo.vue(html):

换肤 / 切换样式主题 方式2:

我是一个可以换肤的div

demo.vue(js):

效果:

vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解(干货)_第3张图片

方式3:切换顶级CSS类名 (需使用css处理器,如sass、less等)

src/assets/css/theme.less:

/* 预设四种主题 */
.theme_1 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}

.theme_2 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}

.theme_3 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}

.theme_4 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}

image.png

main.js:

// 方式3:需要先引入全局主题样式文件 
import "./assets/css/theme.less";

App.vue:

demo.vue(html):

换肤 / 切换样式主题 方式3:

我是一个可以换肤的div

demo.vue(js):

效果:

vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解(干货)_第4张图片

你可能感兴趣的