Vue 动态加载全局样式css（切换ui主题方案）

我是唐赢2024-04-29 23:01

思路：

1、准备多个主题的css

ui.css (标准主题)

ui-red.css (红色主题)

ui-blue.css (兰色主题)

该主题定一些按钮的样式，字体的大小，颜色

main.js中根据场景来引用css

javascript 复制代码

import Vue from 'vue'
import App from './App'
import router from './router'
import VueRouter  from 'vue-router'

....

if (sessionStoreage("orgType") == 1) {
    Vue.mixin({
      created () {
        require('@/assets/css/ui.css')
      }
    })
} else if (sessionStoreage("orgType") == 2) {
    Vue.mixin({
      created () {
        require('@/assets/css/ui-red.css')
      }
    })
} else if (sessionStoreage("orgType") == 3) {
    Vue.mixin({
      created () {
        require('@/assets/css/ui-blue.css')
      }
    })
}

上面代码是根据不同的机构类型显示不同的主题，比如说，当org_type=2时，引用了ui-red.css，里面定义的按钮样式是红色，到时就是显示的红色按钮

ui.css

css 复制代码

.ui-print-button {
    background: blue;
    border-radius: 0px;
    padding-left:15px;
    padding-right:15px;
    min-width: 30px;
    height: 30px;
    color: #fff;
    font-size: 14px;
}

ui-red.css

css 复制代码

.ui-print-button {
    background: red;
    border-radius: 0px;
    padding-left:15px;
    padding-right:15px;
    min-width: 30px;
    height: 30px;
    color: #fff;
    font-size: 14px;
}