vue 动态scss变量,包含16进制转rgba，rgba转16进制

三妹_day

已于 2022-11-02 10:04:04 修改

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue scss 文章标签： vue.js scss javascript

于 2022-10-27 18:08:04 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26841153/article/details/127557780

vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

scss

1 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中动态地绑定和管理SCSS变量，包括16进制颜色到RGBA的转换以及RGBA到16进制的转换。首先，通过页面绑定scss变量，接着使用javascript为这些变量赋值，最后展示如何利用这些动态的SCSS变量来设置组件的样式。

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

1.页面绑定scss变量

<div :style="{'--text': theme , '--colorRgba': colorRgba}">
</div>

2.js 给scss变量赋值

watch: {
      // 监听主题色
      "theme":{
        handler:function(newVal,oldVal){
          console.log('newVal',newVal);
        }
      }
    },
computed: {
   computed: {
    theme () { //主题颜色
      return this.$store.state.settings.theme;　　
    },
    colorRgba(){  // rgab背景色
      const color = this.$store.state.settings.theme
      let colorRgba = this.colorHextoRGB(color)
      colorRgba = this.hexify( colorRgba)
      // console.log('colorRgba',colorRgba)
      return colorRgba;　　
    },
  },
  },
  methods: {
   // 16进制转换rgba
     colorHextoRGB(val){
        let color = val;
        console.log('color',color)
        var t = {},
                bits = (color.length == 4) ? 4 : 8,//假设是shorthand。 #fff, 那么bits为4位, 每一位代表的个属性, 其他的为8位 每两位代表一个属性 #ffffff00
                mask = (1 << bits) - 1; //表示字节占位符。 向左移4位或8位，var a = (1 << 4 ) - 1 -> 10000 - 1,  a.toString(2); // 1111。或者 8位的 1111 1111
        color = Number("0x" + color.substr(1)); //#ff0000 转变为16进制0xff0000;
        if(isNaN(color)){
            return null; // Color
        }
        ["b", "g", "r"].forEach(function(x){
            var c = color & mask;
            color >>= bits;
            t[x] = bits == 4 ? 17 * c : c; // 0xfff ， 一个f应该代表 255, 应该当[0-255]，按15等份划分，每一等份间隔 17。 所以获得的值须要乘以17, 才干表示rgb中255的值
        });
        // 这里的a可以自己给值，0-1,给1就是直接rgb颜色值了，给小数就是rgba的颜色值了
        t.a = 0.1;  
        console.log('t',t)
        const rgba='rgba('+ t.r + ','  +t.g + ','+ t.b +',' + t.a+')'
        return rgba;   // Color
      },
      // rgba转换16进制
      hexify(color) {
      var values = color
        .replace(/rgba?\(/, '')
        .replace(/\)/, '')
        .replace(/[\s+]/g, '')
        .split(',');
      var a = parseFloat(values[3] || 1),
          r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
          g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
          b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
      return "#" +
        ("0" + r.toString(16)).slice(-2) +
        ("0" + g.toString(16)).slice(-2) +
        ("0" + b.toString(16)).slice(-2);
      },
 },
 mounted() {
  		// 给scss变量--text重新赋值,可以刷新之后主题色还是配置的，还有一些弹窗组件的主题色还在
      document.getElementsByTagName('body')[0].style.setProperty('--text', this.theme);
      document.getElementsByTagName('body')[0].style.setProperty('--colorRgba', this.colorRgba);
 }

3.用scss变量设置样式

div{
	background-color: var(--colorRgba);
    border-color: var(--text);
 }