Vue换肤主题

最新推荐文章于 2024-12-06 15:36:13 发布

A-sleep

最新推荐文章于 2024-12-06 15:36:13 发布

阅读量1.5k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/FellAsleep/article/details/130618226

版权

本文详细介绍了如何在Vue.js应用中实现换肤主题功能，包括注册颜色选择组件、将主题颜色同步到Vuex、配置默认主题色、使用immediate属性改进watch、通过Cookies实现主题色持久化以及在退出时的处理。同时提到了行内样式自定义和导航的定制，以及在下一篇文章中对tagsView的修改说明。

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

在这里插入图片描述

拷贝颜色选择组件 **ThemePicker

<template>
  <!-- navabar的换肤组件 -->
  <el-color-picker
    v-model="theme"
    :predefine="[
      '#409EFF',
      '#1890ff',
      '#304156',
      '#212121',
      '#11a983',
      '#13c2c2',
      '#6959CD',
      '#f5222d'
    ]"
    class="theme-picker"
    popper-class="theme-picker-dropdown"
  />
</template>

<script>
const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color

export default {
   
  data() {
   
    return {
   
      chalk: '', // content of theme-chalk css
      theme: ''
    }
  },
  computed: {
   
    defaultTheme() {
   
      return this.$store.state.settings.theme
    }
  },
  watch: {
   
    defaultTheme: {
   
      handler: function(val, oldVal) {
   
        this.theme = val
      },
      immediate: true
    },

    // 监视了theme的变化（主体色）字符串
    // 只要theme变化了，切换element-ui相关的主题色，加载对应的样式
    theme: {
   
      // 是否一进入页面，就立刻执行
      immediate: true,
      async handler(val) {
   
        const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
        if (typeof val !== 'string') return
        const themeCluster = this.getThemeCluster(val.replace('#', ''))
        const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))

        const $message = this.$message({
   
          message: '  Compiling the theme',
          customClass: 'theme-message',
          type: 'success',
          duration: 0,
          iconClass: 'el-icon-loading'
        })

        const getHandler = (variable, id) => {
   
          return () => {
   
            const originalCluster = this.getThemeCluster(
              ORIGINAL_THEME.replace('#', '')
            )
            const newStyle = this

最低0.47元/天解锁文章