前端点击切换样式/切换主题

1.创建一个theme_utils.js文件：

javascript 复制代码

const theme = {
  chalk: {
    // 背景颜色
    backgroundColor: '#161522',
    // 标题的文字颜色
    titleColor: '#ffffff',
    // 左上角logo的图标路径
    logoSrc: 'logo_dark.png',
    // 切换主题按钮的图片路径
    themeSrc: 'qiehuan_dark.png',
    // 页面顶部的边框图片
    headerBorderSrc: 'header_border_dark.png'

  },
  vintage: {
    // 背景颜色
    backgroundColor: '#eeeeee',
    // 标题的文字颜色
    titleColor: '#000000',
    // 左上角logo的图标路径
    logoSrc: 'logo_light2.png',
    // 切换主题按钮的图片路径
    themeSrc: 'qiehuan_light.png',
    // 页面顶部的边框图片
    headerBorderSrc: 'header_border_light.png'
  }
}

export function getThemeValue (themeName) {
  return theme[themeName]
}

2.在目标组件中引入该文件并进行使用：将动态属性（样式）绑定计算属性。

javascript 复制代码

<template>
  <div class='com-container'>
    <span class="iconfont arr-left" @click="toLeft" :style="comStyle">&#xe6ef;</span>
    <span class="iconfont arr-right" @click="toRight" :style="comStyle">&#xe6ed;</span>
  </div>
</template>
<script>
//引入文件
import { getThemeValue } from '@/utils/theme_utils'
export default {
  data () {
    return { },
  created () {
    // 在组件创建完成之后 进行回调函数的注册
    //this.$socket.registerCallBack('hotData', this.getData)  },
  computed: {
    comStyle () {
      return {
        //fontSize: this.titleFontSize + 'px',
       //调用该方法
        color: getThemeValue(this.theme).titleColor
      }
    },
    //仓库中引入的计算属性，
    //...mapState(['theme'])
  },

javascript 复制代码

<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="headerSrc" alt="">
      </div>
      <span class="logo">
        <img :src="logoSrc" alt="" />fullscreen
      </span>
      <span class="title">电商平台实时监控系统</span>
      <div class="title-right">
        <img :src="themeSrc" class="qiehuan" @click="handleChangeTheme">
        <span class="datetime">2049-01-01 00:00:00</span>
      </div>
    </header>
</template>
<script>
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
export default {
  created() {
    // 注册接收到数据的回调函数
    //this.$socket.registerCallBack('fullScreen', this.recvData)
    //this.$socket.registerCallBack('themeChange', this.recvThemeChange)
  },
  destroyed() {
    //this.$socket.unRegisterCallBack('fullScreen')
    //this.$socket.unRegisterCallBack('themeChange')
  },
  data() {
    return {
      }
    }
  },
  methods: {
    //recvThemeChange() {
      //this.$store.commit('changeTheme')
   // }
  },
  computed: {
    logoSrc() {
      return '/static/img/' + getThemeValue(this.theme).logoSrc
    },
    headerSrc() {
      return '/static/img/' + getThemeValue(this.theme).headerBorderSrc
    },
    themeSrc() {
      return '/static/img/' + getThemeValue(this.theme).themeSrc
    },
    containerStyle() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor
      }
    },
    //...mapState(['theme'])
  }
}