HR-12-多语言全屏

叙白
178 阅读1分钟

多语言全屏主题切换

全屏插件的引用

image.png

组件创建

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


1 开启全屏: document.documentElement.requestFullscreen()

2 关闭全屏: document.exitFullscreen()

  • 第一步，安装全局插件screenfull
$ npm install screenfull
  • 第二步，封装全屏显示的组件 src/components/ScreenFull/index.vue
<template>
  <!-- 放置一个图标 -->
  <div>
    全屏图标
  </div>
</template>

<script>
export default {
  name: 'ScreenFull'
}
</script>
  • 第三步，全局注册该组件  src/components/index.js
import ScreenFull from './ScreenFull'
Vue.component('ScreenFull', ScreenFull) // 注册全屏组件
  • 第四步，放置于**layout/navbar.vue**中
<div class="right-menu">
  <!-- 全屏组件 -->
  <screen-full class="right-menu-item" />
  ...
</div>
  • 样式:
    • 审查元素，右侧没有类名（没有添加深度选择器 ::v-deep）
    • 审查元素，右侧有类名，但是没有生效（优先级不够）
.right-menu-item {
  vertical-align: middle;
}

准备全屏的 svg 图标

svg-icon 图标组件使用步骤:


1 前置: 项目中要有 icons 目录, components/SvgIcon 组件 (已有) 工作中可以直接 C V 过去

main.js 中要导入 (已导入)

import '@/icons' // icon


2 检查 icons 目录下 svg 是否有你的 svg 图标  (fullscreen)

3 写一个 svg-icon 组件, 加 icon-class 属性即可指定使用哪个图标 <svg-icon icon-class="fullscreen" />

<template>
  <!-- 放置一个图标 -->
  <div>
    <svg-icon icon-class="fullscreen" class="fullscreen" />
  </div>
</template>

<script>
export default {
  name: 'ScreenFull'
}
</script>

<style lang="scss" scoped>
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>

全屏功能实现


全局插件 screenfull 已安装过, 这里可以使用它的 api 完成功能

导入: import ScreenFull from 'screenfull'

属性: ScreenFull.isEnabled 获取浏览器是否支持全屏, 支持, 就返回 true

属性: ScreenFull.isFullscreen判断当前是否为全屏状态

方法: ScreenFull.toggle()  切换全屏状态

<template>
  <!-- 放置一个图标 -->
  <div class="full-screen">
    <!-- 显示全屏图标 -->
    <svg-icon
      v-if="!isFullScreen"
      icon-class="fullscreen"
      class="fullscreen"
      @click="toggleFullScreen"
    />
    <!-- 退出全屏图标 -->
    <svg-icon
      v-else
      icon-class="exit-fullscreen"
      class="fullscreen"
      @click="toggleFullScreen"
    />
  </div>
</template>

<script>
import ScreenFull from 'screenfull'

export default {
  name: 'ScreenFull',
  data () {
    return {
      isFullScreen: false
    }
  },
  methods: {
    // 控制切换全屏效果
    toggleFullScreen () {
      // 进入全屏和退出全屏都是调用该方法（这个方法的内容维持了当前是否全屏的状态）
      if (ScreenFull.isEnabled) {
        // 浏览器支持全屏
        ScreenFull.toggle()
        // 基于ScreenFull的方法实现状态控制
        this.isFullScreen = !ScreenFull.isFullscreen
      } else {
        // 浏览器不支持全屏
        this.$message.error('浏览器不支持全屏效果')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.full-screen {
  display: inline-block;
  .fullscreen {
    color: #fff;
  }
}
</style>

总结：基于第三方包实现全屏效果

多语言实现

**目标**实现国际化语言切换 kazupon.github.io/vue-i18n/zh…

初始化多语言包

需求：点击页面中的下拉选项选中不同的语音，那么系统中界面效果会切换到对应的语言效果 本项目使用国际化 i18n 方案。通过 vue-i18n而实现。我们需要用到8版本


第一步，我们需要首先国际化的包

 $ npm install vue-i18n


第二步，需要单独一个多语言的实例化文件 src/lang/index.js

import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import Cookies from 'js-cookie' // 引入cookie包
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包

// 创建国际化插件的实例
export default new VueI18n({
  // 指定语言类型
  locale: Cookies.get('language') || 'zh', // 从cookie中获取语言类型 获取不到就是中文
  messages: {
    en: {
      ...elementEN // 将饿了么的英文语言包引入
    },
    zh: {
      ...elementZH // 将饿了么的中文语言包引入
    }
  }
})

上面的代码的作用是将Element的两种语言导入了


第三步，在main.js中对挂载 i18n的插件，并配置ElementUI的中英切换逻辑

import i18n from '@/lang'

// 配置ElementUI的中英切换逻辑
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

总结

  1. 熟悉国家化基本配置流程
  2. Element默认的组件的文本提供了国际化支持，但是如果是自己写的文字，需要自己处理国际化效果。

引入自定义语言包

此时，element已经变成了zh，也就是中文，但是我们常规的内容怎么根据当前语言类型显示？


这里，针对英文和中文，我们可以提供两个不同的语言包 src/lang/zh.js , src/lang/en.js

在index.js中同样引入该语言包

import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import Cookies from 'js-cookie' // 引入cookie包
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
import customZH from './zh' // 引入自定义中文包
import customEN from './en' // 引入自定义英文包

Vue.use(VueI18n) // 全局注册国际化包

export default new VueI18n({
  locale: Cookies.get('language') || 'en', // 从cookie中获取语言类型 获取不到就是中文
  messages: {
    en: {
      ...elementEN, // 将饿了么的英文语言包引入
      ...customEN
    },
    zh: {
      ...elementZH, // 将饿了么的中文语言包引入
      ...customZH
    }
  }
})

总结：配置自定义国际化语音包

在左侧菜单中应用多语言包

自定义语言包的内容怎么使用?


在左侧菜单应用

当我们全局注册i18n的时候，每个组件都会拥有一个**$t**的方法，

它会根据传入的key，自动的去寻找当前语言的文本，

  1. 我们可以自己添加一些中英翻译, 将头部翻译成中英文```jsx
{{ $t('navbar.title') }} {{ $t('navbar.enjoy') }}
```
  1. 我们可以将左侧菜单变成多语言展示文本


layout/components/SidebarItem.vue

<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="$t('route.'+onlyOneChild.name)" />


注意：当文本的值为嵌套时，可以通过**$t('key1.key2.key3...')**的方式获取

现在，我们已经完成了多语言的接入，现在封装切换多语言的组件

封装多语言组件-切换语言


封装多语言组件  src/components/Lang/index.vue

<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <div>
      <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import Cookies from 'js-cookie'
export default {
  methods: {
    changeLanguage(lang) {
      Cookies.set('language', lang) // 切换多语言
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success('切换多语言成功')
    }
  }
}
</script>


component/index.js全局注册

import LangChange from './Lang'

export default {
  // 插件的初始化, 插件给你提供的全局的功能, 都可以在这里配置
  install(Vue) {
    // 进行组件的全局注册
		...
    Vue.component('lang-change', LangChange)
  }
}


在Navbar组件中引入

<!-- 语言包 -->
<lang-change class="right-menu-item" />
<!-- 全屏组件 -->
<screen-full class="right-menu-item" />
<!-- 放置换肤插件 -->
<theme-picker class="right-menu-item" style="padding-top: 10px" @change="changeTheme" />

总结：点击下拉列表的语言条目，实现语言环境的即时切换

avatar
文章
阅读
粉丝