vue中控制less变量发生变化

2023-12-29 10:27:50

前言

? ? 我原本想进行类似于一个主题更换的功能,但是好像不能直接去控制less变量发生变化,所以我们需要利用变量去给less赋值,接下来直接展示吧!

首先

在有less的配置环境下:

如果没有可以通过以下命令进行添加

npm install less-loader --save
npm install less --save

配置安装完成后,我们可以去vite.config.ts中配置less了,如下

export default defineConfig((mode: ConfigEnv) => {
  return { 
    css: {
      preprocessorOptions: {
        css: { charset: false },
        less: { 
          modifyVars: {
            hack: 'true; @import "@/theme/mixins";',
          },
          javascriptEnabled: true,
        },
       
      }
    },
   
  }
})

这样就配置好了,当然你也得将mixins文件导入全局,导入到mian.ts中

import './theme/mixins.less'

这样即可

接下来

我们在less文件中mixins.less操作less变量

@backGroundColor:var(--primaryColor);
@backGroundColorRgba: var(--primaryRgbaColor);
.main1 {
    background-color: @backGroundColorRgba;
}

.mian2 {
    background-color: @backGroundColor;
} 

最后

我们在想要使用这个less的vue文件中需要导入他的style,如下

<Content :style="{'--primaryColor': primaryColor,'--primaryRgbaColor':primaryRgbaColor}"/>

使用‘--primaryColor'这种形式就可以传入这个变量,利用primaryColor来控制颜色

如下

const primaryColor = '#79C547'
const primaryRgbaColor = colorToRGB(primaryColor,0.85)

colorToRGB是我写的一个16进制转换成rgba格式的一个工具函数,为了解决一些使用一个变量再去控制透明度的颜色

export const colorToRGB = (color:string, opt:number) => {
    let color1, color2, color3;
    color = '' + color;
    if (typeof color !== 'string') return;
    if (color.charAt(0) == '#') {
        color = color.substring(1);
    }
    if (color.length == 3) {
        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
    }
    if (/^[0-9a-fA-F]{6}$/.test(color)) {
        color1 = parseInt(color.substr(0, 2), 16);
        color2 = parseInt(color.substr(2, 2), 16);
        color3 = parseInt(color.substr(4, 2), 16);
        return 'rgb(' + color1 + ',' + color2 + ',' + color3 + ',' + opt + ')';
    }
};

结束

只要我们控制住primaryColor这个变量我们就可以很好的去改变全局受控的颜色了,这篇文章主要是为了起到引导作用哈~~~

文章来源:https://blog.csdn.net/qq_44738313/article/details/135271244
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。