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

思路:

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;
}
相关推荐
qq_3643717244 分钟前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森2 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
找藉口是失败者的习惯2 小时前
Jetpack Compose 如何布局解析
android·xml·ui
你挚爱的强哥6 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森7 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy7 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
天涯倦客的美丽人生8 小时前
2024年11月最新版Adobe PhotoShop(26.0)中文版下载
ui·adobe·photoshop
天天进步20159 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket