Vue 人资 实战篇十 全屏化插件、动态主题设置、多语言化语言包、tab页视图(假)

1.0 全屏插件的引用

目标：实现页面的全屏功能

全屏功能可以借助一个插件来实现

1. 第一步，安装全局插件screenfull

npm i screenfull

2. 第二步，封装全屏显示的插件·· src/components/ScreenFull/index.vue

<template>
  <!-- 放置一个图标 -->
  <div>
    <!-- 放置一个svg的图标 -->
    <svg-icon icon-class="fullscreen" style="color:#fff; width: 20px; height: 20px" @click="changeScreen" />
  </div>
</template>

<script>
import ScreenFull from 'screenfull'
export default {
   
  methods: {
   
    //   改变全屏
    changeScreen() {
   
      if (!ScreenFull.isEnabled) {
   
        // 此时全屏不可用
        this.$message.warning('此时全屏组件不可用')
        return
      }
      // document.documentElement.requestFullscreen()  原生js调用
      //   如果可用 就可以全屏
      ScreenFull.toggle()
    }
  }
}
</script>

<style>

</style>

3. 第三步，全局注册该组件 src/components/index.js

import ScreenFull from './ScreenFull'
Vue.component('ScreenFull', ScreenFull) // 注册全屏组件

4. 第四步，放置于 layout/navbar.vue 中

<screen-full class="right-menu-item" />
.right-menu-item {
   
   vertical-align: middle;
}

2.0 动态主题的设置

目标： 实现动态主题的设置

我们想要实现在页面中实时的切换颜色，此时页面的主题可以跟着设置的颜色进行变化

简单说明一下它的原理： element-ui 2.0 版本之后所有的样式都是基于 SCSS 编写的，所有的颜色都是基于几个基础颜色变量来设置的，所以就不难实现动态换肤了，只要找到那几个颜色变量修改它就可以了。 首先我们需要拿到通过 package.json 拿到 element-ui 的版本号，根据该版本号去请求相应的样式。拿到样式之后将样色，通过正则匹配和替换，将颜色变量替换成你需要的，之后动态添加 style 标签来覆盖原有的 css 样式。

1. 第一步， 封装颜色选择组件 ThemePicker 代码地址：@/components/ThemePicker。

注意：本章节重点在于集成，内部的更换主题可以先不用关心。

（也可以去代码地址里去复制）

<template>
  <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
    },
    async theme(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('#', ''))
      console.log(themeCluster, originalCluster)
      const $message = this.$messag