Vue.js项目更换皮肤,同时支持多套皮肤

2 篇文章 0 订阅

需求

改一些操作按钮的颜色

方案一:

1. 首先在main.js中引入公共css样式

  import './assets/common/css/btnStyle.css';

2. 对应的css样式

.blueBtn{
  background: #0074ff
}
.pinkBtn{
  background: #ff4b4b
}
.yellowBtn{
  background: #ffae04
}

3.创建一个公共的js文件,

根据不同的条件展示不同的CSS样式

Vue.prototype.$btnStyle = () => {
  let clientId = localStorage.getItem('clientId');
  switch (clientId) {
    case 'wkbyj001':
      return 'pinkBtn';
    case 'nzwz00001':
      return 'yellowBtn';
    default:
      return 'blueBtn';
  }
};

4. 在html中使用改样式

<div class="submit" :class="$btnStyle()">提交</div>

注: 该方案在项目中已经正常使用,暂无发现bug

方案二:

1、首先在App.vue中加了一个变量,用来判断当前是哪个风格

data(){
    return{
      //true/false分别代表两种风格,其实用字符串比较科学,方便后续再扩展,但是考虑true/false比较方便,而且目测也没有第三个买家,所以,偷懒了一下
      ccstyle=true,
   }
}

2、根据ccstyle的不同,加载不同的css文件

其中purple和lightblue就是本文的两种风格了

    mounted: function () {
      if (this.ccstyle) {
        require('./assets/public/css/base-lightblue.css')
      } else {
        require('./assets/public/css/base-purple.css')
      }
    },

原来只有一个css文件main.css文件,现在拆分成三个,main.css里面放公共的,另外两个只放两种风格中不同的:
main.css
base-lightblue.css
base-purple.css

3、关于主色调的处理

因为是主色调,所以项目中大量使用到,为了防止硬编码,所以采用了css的变量
分别在两个css中定义不同的主色调--maincolor

//这个是base-purple.css
:root{
  --maincolor:#9966ff;
}
//这个是base-lightblue.css
:root{
  --maincolor:#7dc2df;
}

然后其他地方在使用的时候,直接用var(--maincolor)即可,这样以后如果改主色调,也是只在定义的地方修改就好了,非常的方便

background-color: var(--maincolor);
border: 1px solid var(--maincolor);

4、background-image的处理

这种很简单,我直接在photoshop里面把紫色图片批量替换成蓝色。。然后放两套图片在两个目录下。
两个css种分别写一下路径即可(只需要更换文件夹)

//这个是base-purple.css
.ad-icon-financial{
  background: url(../icon/purple/test.png) no-repeat 0 6px;
}
//这个是base-lightblue.css
.ad-icon-financial{
  background: url(../icon/lightblue/test.png) no-repeat 0 6px;
}

5、<img />的处理

因为是换皮肤,这种一般是没有的,但是,但是,我这次也遇到了。
因为是老项目,前面程序员也是偷懒,本应该使用background-image的,也用了img标签了。
这种我的方法是直接全部替换成background-image,然后用上面的方式处理。

当然那有的地方必须要用img,那也不难,判断ccstyle,然后拼接src的字符串就可以了,比如我对logo的处理。

<img class="logo" v-if="this.$parent.ccstyle" src="../../assets/public/iocn/cclogo.png" />
<img class="logo" v-else="" src="../../assets/public/iocn/logo.png" width="180" />

 

BUG:  vue经过打包后发现css样式会同时引入,所有按钮样式都一样   不能起到换肤的作用

注意: 由于使用的是css3的特性,所以兼用型不好

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值