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

最新推荐文章于 2025-02-25 11:04:19 发布

我是唐赢

最新推荐文章于 2025-02-25 11:04:19 发布

阅读量778

点赞数 4

分类专栏： css vue.js 文章标签： vue.js css ui

本文链接：https://blog.youkuaiyun.com/gdgztt/article/details/138118547

版权

vue.js 同时被 2 个专栏收录

64 篇文章

订阅专栏

css

6 篇文章

订阅专栏

文章描述了如何使用Vue.js和JavaScript的sessionStorage在不同组织类型下加载对应的CSS文件（如ui.css,ui-red.css,ui-blue.css），以实现界面元素的样式定制，如红色主题下的红色按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

1、准备多个主题的css

ui.css (标准主题)

ui-red.css (红色主题)

ui-blue.css (兰色主题)

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

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

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

.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

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