前端开发攻略---在Vue3项目中修改Element-Plus主题色

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 string
  changeTheme(color || '')
})

// 改变颜色
const handleChange = (e: string) => {
  localStorage.setItem('currentPrimaryColor', currentColor.value)
  changeTheme(e)
}
</script>

<style></style>