1、演示
![](https://i-blog.csdnimg.cn/direct/31e9c7ab4e394a998331fc6180bb597b.gif)
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 string
changeTheme(color || '')
})
// 改变颜色
const handleChange = (e: string) => {
localStorage.setItem('currentPrimaryColor', currentColor.value)
changeTheme(e)
}
</script>
<style></style>