公司企业策划书模板_网页做成软件_北京百度搜索优化_西安网站公司推广

更换<n-switch>的颜色

使用     :theme-overrides="themeOverrides" 

<n-switch size="small" :theme-overrides="themeOverrides" v-model:value="app.enable" @update:value="toggleEnable(app)"/>

const themeOverrides = {railColorActive: '#42af38', // 选中时的轨道颜色
};

全局更换主题色,默认原本是绿色,现在全局更换的到蓝色

1.自定义主题的js

import { defineComponent } from 'vue';export default {common: {// 设置主色为蓝色primaryColor: '#2080f0',primaryColorHover: '#4098fc',primaryColorPressed: '#1060c9',primaryColorSuppl: '#4098fc',infoColor: '#2080f0',infoColorHover: '#4098fc',infoColorPressed: '#1060c9',infoColorSuppl: '#4098fc'}
};

 2:在app.vue中使用

 以下是我的App.vue整个代码

<template><n-config-provider style="height: 100%;" :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="themeOverrides"><n-loading-bar-provider><n-dialog-provider><n-notification-provider><n-message-provider><router-view></router-view><naive-provider-content/></n-message-provider></n-notification-provider></n-dialog-provider></n-loading-bar-provider></n-config-provider>
</template><script setup>
import {useLoadingBar,useDialog,useMessage,useNotification,NDialogProvider,NConfigProvider,NLoadingBarProvider,NMessageProvider,NNotificationProvider
} from 'naive-ui'
import {zhCN, dateZhCN} from 'naive-ui'
import {defineComponent, h, onMounted} from "vue";
import themeOverrides  from "@/styles/theme.js";// 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用
function registerNaiveTools() {window.$loadingBar = useLoadingBar()window.$dialog = useDialog()window.$message = useMessage()window.$success = message('success')window.$warning = message('warning')window.$error = message('error')window.$info = message('info')window.$notification = useNotification()
}function message(type
) {return (content, duration = 1000, options) => {return new Promise((resolve) => {window.$message?.[type](content, {duration,...options,onLeave: () => {if (options?.onLeave) {options.onLeave()}resolve()}})})}
}const NaiveProviderContent = defineComponent({name: 'NaiveProviderContent',setup() {// console.debug(111)registerNaiveTools()},render() {return h('div')}
})</script>

 重点:

只要配置好这个两个地方就可以了,来让我们看一下样式,默认的输入框聚焦是蓝色的了,其他的地方默认的主题色都会随之更新的