乐趣区

关于前端:vuewin10admin交个朋友系列之主题切换方案

作者：

jiezi

在

前言

【vue-koa2全栈撸win10格调管理系统】交个敌人系列文章，带各位全栈撸win10格调管理系统开发，当然我的项目也参考很多优良的前后端我的项目构建计划和我在工作中的一些中的一些教训利用，次要是交个敌人的心态，如果你对这个我的项目有趣味，也心愿你的退出一起欠缺保护这个我的项目，let go~~~

残缺我的项目地址：vue-win10-admin

本篇文章是【Vue+Koa2+Mysql全栈撸win10格调管理系统】交个敌人系列之主题切换计划

先来一个主题切换效果图，次要实现背景图片的切换和主题色的切换，而且刷新浏览器还是能放弃

一、实现性能次要技术点

1、利用localStorage浏览器本地存储主题设置信息（当然也能够存储在数据库里）
2、scss抽离主题文件中波及到色彩的 CSS 值替换成关键词
3、实时监听localStorage的变动，关键词再换回生成的相应的色彩值或者背景图片

二、抽取主题变量，封装mixin

在目录 styles/theme-variable.scss先把主题文件中波及到色彩的 CSS 值替换成关键词,做了个别中央进行皮肤切换

$background-color-theme1: #409EFF;
$background-color-theme2: #0078D7;
$background-color-theme3: #C30052;
$background-color-theme4: #9A0089;
$background-color-theme5: #67C23A;
$background-color-theme6: #CA5010;
$background-color-theme7: #CA5010;
$background-color-theme8: red;
$background-color-theme9: #303133;
$background-color-theme10: #606266;
$background-color-theme11: #909399;
$background-color-theme12: #C0C4CC;
$background-color-theme13: #DCDFE6;
$background-color-theme14: #E4E7ED;
$background-color-theme15: #EBEEF5;
$background-color-theme16: #FFFFFF;

$font-color-black: #303133;
$font-color-white: #FFFFFF;

$startMenu-background-color-black: rgba(19, 23, 28, 0.9);
$startMenu-background-color-white: #F2F6FC;

在目录 styles/theme-mixin.scss 设置背景色彩封装成一个mixin办法（包含字体大小，字体色彩，进行封装），@mixin通过自定义属性[data-theme=””]去辨认对应的色彩变量

@mixin background-color($color) {
 background-color: $color;
 [data-theme="theme1"] & {
   background-color:$background-color-theme1;
 }
 [data-theme="theme2"] & {
   background-color:$background-color-theme2;
 }
 [data-theme="theme3"] & {
   background-color:$background-color-theme3;
 }
 [data-theme="theme4"] & {
   background-color:$background-color-theme4;
 }
 [data-theme="theme5"] & {
   background-color:$background-color-theme5;
 }
 [data-theme="theme6"] & {
   background-color:$background-color-theme6;
 }
 [data-theme="theme7"] & {
   background-color:$background-color-theme7;
 }
 [data-theme="theme8"] & {
   background-color:$background-color-theme8;
 }
 [data-theme="theme9"] & {
   background-color:$background-color-theme9;
 }
 [data-theme="theme10"] & {
   background-color:$background-color-theme10;
 }
 [data-theme="theme11"] & {
   background-color:$background-color-theme11;
 }
 [data-theme="theme12"] & {
   background-color:$background-color-theme12;
 }
 [data-theme="theme13"] & {
   background-color:$background-color-theme13;
 }
 [data-theme="theme14"] & {
   background-color:$background-color-theme14;
 }
 [data-theme="theme15"] & {
   background-color:$background-color-theme15;
 }
 [data-theme="theme16"] & {
   background-color:$background-color-theme16;
 }
}

在页面上须要用到切换肤色的中央援用样

@import "~@/styles/theme-mixin.scss";
 @import "@/styles/theme-variable.scss";
 @include background-color($background-color-theme1); //援用背景色彩设置
 @include font-color($font-color-white); //援用字体设置

例如在layout页面布局里相干文件里（局部展现）,这里是根底scss技能不再做过多的解说

<style lang="scss" scoped>
@import "~@/styles/theme-mixin.scss";
@import "@/styles/theme-variable.scss";
.window-wrapper {
position: absolute;
min-width: 1280px;
min-height: 80%;
z-index: 9;
.window-header {
  height: 40px;
  line-height: 40px;
  @include background-color($background-color-theme1);
  transition: all .5s;
  display: flex;

  .window-title {
    flex: 1;
    padding-left: 10px;
    user-select: none;
    color: #fff;
    @include font-color($font-color-white);
    transition: all .5s;

三、主题色彩设置

在目录 src/views/config/coloer/index.vue 中更换主题时的操作代码

<template>
  <div class="colour-wrapper">
    <preview></preview>
    <div class="set-wrapper">
      <div class="title">主题色</div>
      <div class="colour-list">
        <div v-for="index of 16" :key="index" :class="'theme-color-'+index" @click="changeTheme(index)"></div>
      </div>
    </div>
  </div>
</template>

<script>
import preview from '@/components/preview.vue'
import { localKey } from '@/settings'
export default {
  components: {
    preview
  },
 data() {
    return {
    }
  },
 methods:{
   changeTheme(index) {
     let theme = "theme" + index
    window.document.documentElement.setAttribute('data-theme', theme)
   } 
 }
}
</script>

通过再抉择主题的时候，我在这里主题色16个能够抉择，列表是用v-for
列表渲染进去的，每个色彩绑定一个一个点击事件，通过DOM操作在设置自定义属性[data-theme]，会在html里增加自定义属性data-theme，这样就是实现了皮肤切换

然而这样有什么毛病呢？

当你刷新浏览器的时候，你会发现这个设置就不失效了，
所以接下来思考存储到浏览器缓存里去

四、localStorage本地存储主题设置

总所周知，vue无奈监听localstorage的变动的，这里通过注册全局办法，而后通过事件派发的形式实现localstorage的响应式
依据咱们我的项目中的主题相干的属性，目前有主题和背景图相干的设置存储在一个对象里
咱们在 src/utils/storage.js里针对原生localStorage 的api都封装一层，生成本人的专用主题设置模块存储派发模块

export const dispatchSetLocalStore = (key, type, value) => {
  let settings = _getLocalStore(key,'JSONStr') || {
    theme: 11,
    taskbarMode: 'bottom',
    bgSrc: ''
  }
  switch(type) {
    case 'bgSrc':
      settings.bgSrc = value
      break
    case 'theme':
      settings.theme = value
      break
    case 'taskbarMode':
      settings.taskbarMode = value
      break
  }
  settings = JSON.stringify(settings)
    // 创立一个StorageEvent事件
  let newStorageEvent = document.createEvent('StorageEvent');
  const storage = {
      setItem: function (k, val) {
        localStorage.setItem(k, val)
        // 初始化创立的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null)
        // 派发对象
        window.dispatchEvent(newStorageEvent)
      }
  }
  return storage.setItem(key, settings)
}

而后在src/main.js对vue增加一个原型属性

import { dispatchSetLocalStore } from './utils/storage'
Vue.prototype.setLocalStore = dispatchSetLocalStore

此时此刻咱们就能够在vue文件里监听到变动了

<template>
  <div id="app"  :style="{ background: 'url('+bgSrc+')'}" :data-theme="theme">
    <router-view />
  </div>
</template>

<script>
import { _getLocalStore } from '@/utils/storage'
import { localKey } from '@/settings'
export default {
  name: 'App',
  data() {
   return {
     bgSrc: _getLocalStore(localKey, 'JSONStr') && _getLocalStore(localKey, 'JSONStr').bgSrc  ? _getLocalStore(localKey, 'JSONStr').bgSrc : require('@/assets/bg_01.jpg'),
     theme: _getLocalStore(localKey, 'JSONStr') && _getLocalStore(localKey, 'JSONStr').theme  ? _getLocalStore(localKey, 'JSONStr').theme : 'theme1'
    }
  },
  created(){
    window.addEventListener('setItem', () => {
      let local = _getLocalStore(localKey, 'JSONStr')
      this.bgSrc = local && local.bgSrc ? local.bgSrc : this.bgSrc
      this.theme = local && local.theme ? local.theme : this.theme
    })
  },
}
</script>

在目录 src/views/config/coloer/index.vue 中更换主题时的操作代码
此时就不是 window.document.documentElement.setAttribute('data-theme', theme)
而是this.setLocalStore(localKey, 'theme', theme)

五、总结

换肤的形式次要是对波及到色彩的 CSS 值替换成关键词，依据用户抉择的主题色生成一系列对应的色彩值，用户选的主题设和背景图片通通通过键值对存储在localstorage，而后通过全局事件派发，响应式获取localstorage，通过自定义属性的属性值，对应把关键词再换回刚刚生成的相应的色彩值，切换背景图片，而后别离对其加一些切换动画，显得换肤和切换背景图片天然~
【Vue+Koa2+Mysql全栈撸win10格调管理系统】交个敌人系列文章，会依据我的项目搭建和讲性能点实现，欢送大家一起交换~
残缺我的项目地址：vue-win10-admin

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章