使用ant-design-vue实现换肤功能

短暂又灿烂的 2022-08-06 09:10:56 阅读数:461

vue使用antant-design-vuedesign

1、安装ant-design-vue
 

npm i ant-design-vue --save

2、在main.js中引入

 `import Antd from 'ant-design-vue'`
`import 'ant-design-vue/dist/antd.less'` //这里注意一定要引入`.less`,如果引入`.css`的话,不能更改less变量,就无法实现换肤。
`Vue.use(Antd)`

3、安装antd-theme-generatorless插件
 

npm i antd-theme-generator --save
npm i less --save
npm i less-loader --save


4、在src目录下新建styles文件夹,里面新建index.less,variables.less文件
variables.less内容

@import '~ant-design-vue/es/style/themes/default.less'; //引入默认less样式文件
@link-color: #00375b;
@primary-color: rgb(138, 164, 182); //默认基础色
:root {
--PC: @primary-color; //color.less中加入css原生变量:--PC
}
.primary-color {
color: @primary-color; //后期换肤修改基础色就是在这里
}

index.less文件为空

5、项目根目录下新建color.js文件

const path = require('path')
const { generateTheme } = require('antd-theme-generator')
// ant-design-vue/dist/antd.less
const options = {
antDir: path.join(__dirname, './node_modules/ant-design-vue'), //node_modules中的antd目录的路径
stylesDir: path.join(__dirname, './src/styles'), //对应具体位置
varFile: path.join(__dirname, './src/styles/variables.less'), //与主题相关的变量文件的路径
mainLessFile: path.join(__dirname, './src/styles/index.less'), //less主文件入口
themeVariables: [ //动态更改的变量列表
'@primary-color', //基础颜色
'@secondary-color',
'@text-color', //文本颜色,如果不更改,将会和primary-color保持一致
'@text-color-secondary',
'@heading-color',
'@layout-body-background', //body背景色
'@btn-primary-bg',
'@layout-header-background'
],
indexFileName: 'index.html',
outputFilePath: path.join(__dirname, './public/color.less')//生成的less文件放入到指定位置,下面会用到此路径
}
generateTheme(options)
.then(less => {
console.log('Theme generated successfully')
})
.catch(error => {
console.log('Error', error)
})

6、在publish文件夹下index.html文件中添加以下行,必须添加到body

<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
window.less = {
async: true,
env: 'production'
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>//即时已经安装过less插件,此处仍需要引入此文件,否则会报错 Error in v-on handler: "TypeError: window.less.modifyVars is not a function"

 

7、修改package.json的启动和打包指令

"dev": "node color && vue-cli-service serve --open",
"build": "node color && vue-cli-service build",

8、使用

<template>
<div>
<div class="colorBlock" style="background:green" @click="changeColor('green')"></div>
<div class="colorBlock" style="background:red" @click="changeColor('red')"></div>
<div class="colorBlock" style="background:blue" @click="changeColor('blue')"></div>
<div class="colorBlock" style="background:yellow" @click="changeColor('yellow')"></div>
</div>
</template>
<script>
export default {
methods: {
changeColor(color) {
console.log(window.less)
window.less
.modifyVars({
'@primary-color': color,
'@link-color': color,
'@btn-primary-bg': color
})
.then(() => {
console.log('成功')
})
.catch(error => {
alert('失败')
console.log(error)
})
}
}
}
<style lang="less" scoped>
.main {
display: flex;
}
.colorBlock{
margin-left: 10px;
width: 30px;
height: 30px;
}
</style>

原理:通过window.less.modifyVars方法,去动态的改变less变量。然后在调用color.js,在pulish中生成一个color.less文件,在index.html中重新引入一下,就实现了动态换肤功能。

ok,功能实现,结束。

 

版权声明:本文为[短暂又灿烂的]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/weixin_42232156/article/details/126146418