vue+element实现自定义主题功能

最新推荐文章于 2025-03-20 09:20:27 发布

weixin_43926335

最新推荐文章于 2025-03-20 09:20:27 发布

阅读量893

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端自学vue element 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43926335/article/details/96310530

本文介绍了如何在Vue项目中结合Element UI实现自定义主题功能。首先，通过执行`et -i`安装依赖并生成`element-variables.scss`文件，然后修改主题颜色。接着，更新theme文件夹下的字体文件，再在`main.js`中引入自定义主题。创建名为ThemePicker的组件，并在页面中使用。最后，进行必要的样式调整。

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

第一步按照element官网介绍安装依赖

		npm i element-theme -g
		npm i element-theme-chalk -D

执行代码 et -i 根目录会生成element-variables.scss文件
修改$–color-primary：你喜欢的颜色值执行et 然后你就会看到theme文件夹下的font文件了

main.js中引入import '../theme/index.css'
封装组件名为ThemePicker 代码如下

			<template>
			  <el-color-picker
			    class="theme-picker"
			    popper-class="theme-picker-dropdown"
			    v-model="theme"
			    :size="size">
			  </el-color-picker>
			</template>
			
			<script>
			
			const version = require('element-ui/package.json').version // element-ui version from node_modules
			const ORIGINAL_THEME = '#409EFF' // default color
			export default {
			  name: 'ThemePicker',
			  props: {
			    default: { // 初始化主题，可由外部传入
			      type: String,
			      //default: '#EB815B'
			      default: ""+localStorage.getItem("tremePackers")+""
			    },
			    size: { // 初始化主题，可