欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用vue-antd動態(tài)切換主題

 更新時間：2022年10月10日 09:04:15   作者：Joey_Tribiani  
這篇文章主要介紹了使用vue-antd動態(tài)切換主題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue-antd動態(tài)切換主題

安裝依賴

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: {?
? ? ? ? ? ? //注意：此處不能給默認(rèn)值，否則會導(dǎo)致主題色動態(tài)配置失敗
? ? ? ? ? ? // 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文件夾創(chuàng)建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';

然后項目啟動起來后調(diào)用Vm.$u.updateTheme方法即可動態(tài)改變主題色。

注意該方法傳值必須傳十六進(jìn)制的顏色，如果傳顏色對應(yīng)的英文字符可能會出錯.

如果自定義組件或者元素也需要統(tǒng)一管理主題色，則在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, // 解決開發(fā)模式，打包時未提取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

然后重新運(yùn)行項目即可 

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

相關(guān)文章

  • 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的二次封裝實例講解

    在本篇文章里小編給大家整理了關(guān)于vue中axios的二次封裝實例以及相關(guān)知識點總結(jié)，需要的朋友們可以學(xué)習(xí)下。
    2019-10-10
  • Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼

    Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼

    本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • Vue.Draggable拖拽功能的配置使用方法

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

    這篇文章主要為大家詳細(xì)介紹了Vue.Draggable拖拽功能配置使用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-12-12
  • Vue-cli3生成的Vue項目加載Mxgraph方法示例

    Vue-cli3生成的Vue項目加載Mxgraph方法示例

    這篇文章主要介紹了Vue-cli3生成的Vue項目加載Mxgraph方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • Vue?實現(xiàn)分頁功能

    Vue?實現(xiàn)分頁功能

    Vue提供了豐富的API和組件，可以幫助開發(fā)者快速地構(gòu)建現(xiàn)代化的Web應(yīng)用程序，本文介紹了Vue如何實現(xiàn)分頁功能，包括數(shù)據(jù)的獲取、分頁器的實現(xiàn)和頁面的渲染
    2023-09-09
  • 如何在Vue項目中添加接口監(jiān)聽遮罩

    如何在Vue項目中添加接口監(jiān)聽遮罩

    這篇文章主要介紹了如何在Vue項目中添加接口監(jiān)聽遮罩,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • Vue全局loading及錯誤提示的思路與實現(xiàn)

    Vue全局loading及錯誤提示的思路與實現(xiàn)

    這篇文章主要給大家介紹了關(guān)于Vue全局loading及錯誤提示的思路與實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • vue返回首頁后如何清空路由問題

    vue返回首頁后如何清空路由問題

    這篇文章主要介紹了vue返回首頁后如何清空路由問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-06-06
  • Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例

    Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例

    在Vue.js開發(fā)中我們經(jīng)常會遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的相關(guān)資料,需要的朋友可以參考下
    2024-06-06

最新評論