脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-antd动态切换主题

使用vue-antd动态切换主题

 更新时间：2022年10月10日 09:04:15   作者：Joey_Tribiani  
这篇文章主要介绍了使用vue-antd动态切换主题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue-antd动态切换主题

安装依赖

1 webpack-theme-color-replacer: yarn add webpack-theme-color-replacer@1.3.22
2 less: yarn add less@2.7.2
3 less-loader: yarn add less-loader@7.0.2

在vue.config.js中加入配置

const createThemeColorReplacerPlugin = require("./plugin.config");
const vueConfig = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: { 
            //注意：此处不能给默认值，否则会导致主题色动态配置失败
            // less vars，customize ant design theme
            //'primary-color': '#2f54eb',
            //'link-color': '#2f54eb',
            //'border-radius-base': '4px'
          },
          // DO NOT REMOVE THIS LINE
          javascriptEnabled: true,
        },
      },
    },
  },
  configureWebpack: {
    plugins: [createThemeColorReplacerPlugin()],
  },
  assetsDir: "static",
};
module.exports = vueConfig;

添加主题色更改方法，新建util文件夹创建plugin.config.js

const ThemeColorReplacer = require('webpack-theme-color-replacer')
const generate = require('@ant-design/colors/lib/generate').default

const getAntdSerials = (color) => {
  // 淡化（即less的tint）
  const lightens = new Array(9).fill().map((t, i) => {
    return ThemeColorReplacer.varyColor.lighten(color, i / 10)
  })
  const colorPalettes = generate(color)
  const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')
  return lightens.concat(colorPalettes).concat(rgb)
}

const themePluginOption = {
  fileName: 'css/theme-colors-[contenthash:8].css',
  matchColors: getAntdSerials('#1890ff'), // 主色系列
  // 改变样式选择器，解决样式覆盖问题
  changeSelector (selector) {
    switch (selector) {
      case '.ant-calendar-today .ant-calendar-date':
        return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
      case '.ant-btn:focus,.ant-btn:hover':
        return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
      case '.ant-btn.active,.ant-btn:active':
        return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
      case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
      case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
        return ':not(.ant-steps-item-process)' + selector
      case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
      case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
        return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
      case '.ant-menu-horizontal > .ant-menu-item-selected > a':
      case '.ant-menu-horizontal>.ant-menu-item-selected>a':
        return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a'
      case '.ant-menu-horizontal > .ant-menu-item > a:hover':
      case '.ant-menu-horizontal>.ant-menu-item>a:hover':
        return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover'
      default :
        return selector
    }
  }
}

const createThemeColorReplacerPlugin = () => new ThemeColorReplacer(themePluginOption)

module.exports = createThemeColorReplacerPlugin

添加util.js文件

import client from "webpack-theme-color-replacer/client";
import generate from "@ant-design/colors/lib/generate";

function getAntdSerials(color) {
  // 淡化（即less的tint）
  const lightens = new Array(9).fill().map((t, i) => {
    return client.varyColor.lighten(color, i / 10);
  });
  // colorPalette变换得到颜色值
  const colorPalettes = generate(color);
  const rgb = client.varyColor.toNum3(color.replace("#", "")).join(",");
  return lightens.concat(colorPalettes).concat(rgb);
}
function changeColor(newColor) {
  var options = {
    newColors: getAntdSerials(newColor), // new colors array, one-to-one corresponde with `matchColors`
    changeUrl(cssUrl) {
      return `/${cssUrl}`; // while router is not `hash` mode, it needs absolute path
    },
  };
  return client.changer.changeColor(options, Promise);
}

export default {
  updateTheme(newPrimaryColor) {
    const hideMessage = () => console.log("正在切换主题！", 0);
    changeColor(newPrimaryColor).finally((t) => {
      setTimeout(() => {
        hideMessage();
      });
    });
  },
};

然后在main.js中引入为Vue原型prototype中的方法

import utils from "./utils"
Vue.prototype.$u = utils
//注意antd样式的引入必须由css改为less引入
- import 'ant-design-vue/dist/antd.css';
+ import 'ant-design-vue/dist/antd.less';

然后项目启动起来后调用Vm.$u.updateTheme方法即可动态改变主题色。

注意该方法传值必须传十六进制的颜色，如果传颜色对应的英文字符可能会出错.

如果自定义组件或者元素也需要统一管理主题色，则在assets目录新建main.less

@import "~ant-design-vue/dist/antd.less";
#home {
  color: @primary-color;
}

在main.less中引入antd的样式，然后antd的主题色是@primary-color， 直接使用即可

然后在main.js中直接引入main.less

- import 'ant-design-vue/dist/antd.less';
+ import "./assets/css/main.less"

Vue3.0 + Antd，修改antd主题色，配置全局css

1.在vue.config.js里修改配置

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#3d62ff',// 修改全局主题色
          },
          javascriptEnabled: true,
        },
      },
    },
    extract: true, // 解决开发模式，打包时未提取CSS的问题
  }
}

2.把main.ts中的import ‘ant-design-vue/dist/antd.css’;

修改为 import ‘ant-design-vue/dist/antd.less’;

修改css为less的时候，会报错 .bezierEasingMixin()

解决方法是：先卸载less-loader

npm uninstall -D less-loader

再安装less-loader@6.0.0

npm install -D less-loader@6.0.0

然后重新运行项目即可 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 

您可能感兴趣的文章:

相关文章

  • el-form表单el-form-item label不换行问题及解决

    el-form表单el-form-item label不换行问题及解决

    这篇文章主要介绍了el-form表单el-form-item label不换行问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中axios的二次封装实例讲解

    vue中axios的二次封装实例讲解

    在本篇文章里小编给大家整理了关于vue中axios的二次封装实例以及相关知识点总结，需要的朋友们可以学习下。
    2019-10-10
  • Vue3封装ElImageViewer预览图片的示例代码

    Vue3封装ElImageViewer预览图片的示例代码

    本文主要介绍了Vue3封装ElImageViewer预览图片的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue.Draggable拖拽功能的配置使用方法

    Vue.Draggable拖拽功能的配置使用方法

    这篇文章主要为大家详细介绍了Vue.Draggable拖拽功能配置使用的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Vue-cli3生成的Vue项目加载Mxgraph方法示例

    Vue-cli3生成的Vue项目加载Mxgraph方法示例

    这篇文章主要介绍了Vue-cli3生成的Vue项目加载Mxgraph方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Vue 实现分页功能

    Vue 实现分页功能

    Vue提供了丰富的API和组件，可以帮助开发者快速地构建现代化的Web应用程序，本文介绍了Vue如何实现分页功能，包括数据的获取、分页器的实现和页面的渲染
    2023-09-09
  • 如何在Vue项目中添加接口监听遮罩

    如何在Vue项目中添加接口监听遮罩

    这篇文章主要介绍了如何在Vue项目中添加接口监听遮罩,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue全局loading及错误提示的思路与实现

    Vue全局loading及错误提示的思路与实现

    这篇文章主要给大家介绍了关于Vue全局loading及错误提示的思路与实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-08-08
  • vue返回首页后如何清空路由问题

    vue返回首页后如何清空路由问题

    这篇文章主要介绍了vue返回首页后如何清空路由问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • Vue前端数值转换为千分位格式并保留两位小数代码示例

    Vue前端数值转换为千分位格式并保留两位小数代码示例

    在Vue.js开发中我们经常会遇到需要将数字格式化为保留两位小数的情况,下面这篇文章主要给大家介绍了关于Vue前端数值转换为千分位格式并保留两位小数的相关资料,需要的朋友可以参考下
    2024-06-06

最新评论