【Element】Vue3 中快捷设置 Element 主题色

努力挣钱的小鑫

已于 2024-03-21 09:13:06 修改

阅读量1k

点赞数 22

分类专栏： Element 文章标签： vue.js 前端 javascript

于 2024-03-11 17:44:41 首次发布

本文链接：https://blog.csdn.net/IAIPython/article/details/136630667

版权

文章介绍了如何在Vue应用中安装并使用TinyColor库进行颜色转换，同时检测浏览器版本并在低版本Firefox上显示警告。还展示了如何监听用户选择的主题色并动态更新相关CSS变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接放代码，很简单

需要安装一个颜色转换的库 TinyColor
TinyColor-npm
在这里插入图片描述

代码

app.vue

<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import {
      computed, onMounted, watch } from 'vue';
import {
      ElNotification } from 'element-plus';
import {
      useUserStore } from '@/store/index';
import tinycolor from 'tinycolor2';
const userStore = useUserStore();
const color = computed(() => userStore.baseForm.color);

// 监听浏览器版本
// @ts-ignore
import getBsInfo from 'browser-tag';
const bsInfo = getBsInfo()