1、演示
2、安装依赖
npm i use-element-plus-theme -d
3、使用
import { useElementPlusTheme } from 'use-element-plus-theme'
const { changeTheme } = useElementPlusTheme()const changePrimaryColor = () => {// 传入颜色changeTheme('red')
}
4、演示代码
<template><el-color-picker v-model="currentColor" @change="handleChange" /><hr /><el-button type="primary" v-for="item in 50">按钮{{ item }}</el-button>
</template><script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
// 引入插件
import { useElementPlusTheme } from 'use-element-plus-theme'
// 使用函数
const { changeTheme } = useElementPlusTheme()
// 当前颜色
const currentColor = ref<string>('')
// 组件挂载前使用上一次的颜色
onBeforeMount(() => {const color = localStorage.getItem('currentPrimaryColor')currentColor.value = color as stringchangeTheme(color || '')
})// 改变颜色
const handleChange = (e: string) => {localStorage.setItem('currentPrimaryColor', currentColor.value)changeTheme(e)
}
</script><style></style>
