宁波网站制作公司费用价格,wordpress 会员支付宝,网页培训多少钱,金华规划局网站开发区1. 暗黑主题切换
在main.js中引入下面文件
import element-plus/theme-chalk/dark/css-vars.css安装 vueuse/core
pnpm add vueuse/coreApp.vue 添加下面代码 使用了 useDark() 的页面才会从 localStorage中读取当前主题状态#xff0c;否则#xff0c;刷新页面就会恢复默…1. 暗黑主题切换
在main.js中引入下面文件
import element-plus/theme-chalk/dark/css-vars.css安装 vueuse/core
pnpm add vueuse/coreApp.vue 添加下面代码 使用了 useDark() 的页面才会从 localStorage中读取当前主题状态否则刷新页面就会恢复默认主题 在App.vue 添加 useDark() 所有页面都可以复用 import {useDark} from vueuse/core
useDark()案例1 按钮 控制暗黑模式切换
script setup
import {useDark, useToggle} from vueuse/core;const isDark useDark()
const toggleDark useToggle(isDark)
/scripttemplateel-button clicktoggleDark(){{ isDark ? 简白主题 : 暗黑主题 }}/el-button
/template案例2 switch 控制暗黑模式切换
script setup
import {useDark} from vueuse/core
const isDarkuseDark()
/scripttemplateel-switch v-modelisDark/el-switch
/template2. 自定义主题色
安装插件
pnpm add use-element-plus-theme修改主题色
import {useElementPlusTheme} from use-element-plus-theme
const color#efefef
localStorage.setItem(themeColor,color) // 持久化主题色
useElementPlusTheme(color) // 应用主题色全局应用主题色 App.vue中添加下面代码
import {useElementPlusTheme} from use-element-plus-theme;
useElementPlusTheme(localStorage.getItem(themeColor))
