Ant design vue中实现动态更换主题色
一、创建vue项目可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口输入文件名 ,文件名最好是英文然后进行配置功能,根据需求选择配置功能这里最好选择2.0版本,可以保存预设,下次直接使用等待项目加载出来,找到文件,然后打开二、安装相关依赖,这里可以直接在package.json文件里加入,在项目里加上框住的内容,然后npm i,add ant-design-vue是UI库a
一、创建vue项目
可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口
输入文件名 ,文件名最好是英文
然后进行配置功能,
根据需求选择配置功能
这里最好选择2.0版本,
可以保存预设,下次直接使用
等待项目加载出来,找到文件,然后打开
二、安装相关依赖,这里可以直接在package.json文件里加入,在项目里加上框住的内容,然后npm i,
add ant-design-vue是UI库
ant-design-vue是依赖于less进行开发因此安装less和less-loader
更换主题的核心插件 antd-theme-generator
{
"name": "demo09",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "node color && vue-cli-service serve --mode dev",
"build": "node color && vue-cli-service build --mode prod",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ant-design-vue": "^1.6.5",
"antd-theme-generator": "^1.1.7",
"core-js": "^3.6.5",
"less": "^2.7.3",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"less": "^2.7.3",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
安装好以后,在main.js里引用
import 'ant-design-vue/dist/antd.less'
import Antd from 'ant-design-vue'
Vue.use(Antd)
在public文件下的index.html文件里加入以下内容,在public文件里引入color.less文件
<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
window.less = {
async: false,
env: 'production'
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
在根目录建一个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'), //对应具体位置
stylesDir: path.join(__dirname, './src/styles'), //对应具体位置
varFile: path.join(__dirname, './src/styles/variables.less'), //对应具体位置
mainLessFile: path.join(__dirname, './src/styles/index.less'), //对应具体位置
themeVariables: [
'@primary-color',
'@secondary-color',
'@text-color',
'@text-color-secondary',
'@heading-color',
'@layout-body-background',
'@btn-primary-bg',
'@layout-header-background'
],
indexFileName: 'index.html',
outputFilePath: path.join(__dirname, './public/color.less'),
}
generateTheme(options).then(() => {
console.log('Theme generated successfully');
})
.catch(error => {
console.log('Error', error);
});
在根目录创建一个style文件,文件里创建index.less和variables.less文件,index.less文件可以是空的,内容放在variables.less里,颜色自己设置,代码如下:
@import "~/ant-design-vue/lib/style/themes/default.less";
@link-color: #fdf907;
@primary-color: rgb(252, 5, 120);
:root {
--PC: @primary-color; //color.less中加入css原生变量:--PC
}
.primary-color{
color:@primary-color
}
然后在你要用到的页面使用,我是在HelloWorld.vue中使用的,代码如下:
<template>
<div class="cont">
<a-row>
<a-col :span="12" :offset="6">
<a-divider>设置颜色</a-divider>
<h2>预设颜色</h2>
<div class="yscont">
<div class="ysitem" style="background:#3e91f7" @click="click('#3e91f7')"></div>
<div class="ysitem" style="background:#e23c39" @click="click('#e23c39')"></div>
<div class="ysitem" style="background:#e96033" @click="click('#e96033')"></div>
<div class="ysitem" style="background:#f0af41" @click="click('#f0af41')"></div>
<div class="ysitem" style="background:#58bfc1" @click="click('#58bfc1')"></div>
<div class="ysitem" style="background:#72c140" @click="click('#72c140')"></div>
<div class="ysitem" style="background:#3258e3" @click="click('#3258e3')"></div>
<div class="ysitem" style="background:#6839c9" @click="click('#6839c9')"></div>
</div>
<h2>自定义颜色</h2>
<a-input type="color" style="width:100px;margin-bottom:10px" v-model="color" @change="huan"></a-input>
<a-divider>效果展示</a-divider>
<a-button-group style="margin-right:10px">
<a-button>Cancel</a-button>
<a-button type="primary">OK</a-button>
</a-button-group>
<a-button-group>
<a-button type="primary">L</a-button>
<a-button>M</a-button>
<a-button>M</a-button>
<a-button type="dashed">R</a-button>
</a-button-group>
<br />
<a-radio-group>
<a-radio-button value="a">Hangzhou</a-radio-button>
<a-radio-button value="b">Shanghai</a-radio-button>
<a-radio-button value="c">Beijing</a-radio-button>
<a-radio-button value="d">Chengdu</a-radio-button>
</a-radio-group>
<a-menu theme="dark">
<a-sub-menu key="sub4">
<span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
<a-menu-item key="11">Option 11</a-menu-item>
<a-menu-item key="12">Option 12</a-menu-item>
</a-sub-menu>
</a-menu>
<a-pagination :total="50" />
<a-checkbox-group >
<a-checkbox value="A">A</a-checkbox>
<a-checkbox value="B">B</a-checkbox>
<a-checkbox value="C">C</a-checkbox>
<a-checkbox value="D">D</a-checkbox>
<a-checkbox value="E">E</a-checkbox>
</a-checkbox-group>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data () {
return {
color: ''
}
},
methods: {
click (color) {
this.color = color
this.huan()
},
huan () {
window.less
.modifyVars({
'@primary-color': this.color,
'@link-color': this.color,
'@btn-primary-bg': this.color
})
.then(() => {
console.log('成功')
})
.catch(error => {
alert('失败')
console.log(error)
})
}
}
}
</script>
<style scoped>
.cont {
padding: 100px 0;
}
.yscont {
display: flex;
margin-bottom: 10px;
}
.ysitem {
width: 20px;
height: 20px;
border-radius: 3px;
margin-right: 5px;
cursor: pointer;
}
.ysitem:hover {
box-shadow: 2px 2px 2px #999;
}
</style>
项目目录
更多推荐
所有评论(0)