Vue多语言、全屏处理_vue 多语言显示title

国际化处理

vue项目中的多语言支持使用的是vue-i18n

参考： https://kazupon.github.io/vue-i18n/zh/started.html

1.1目标

实现elementUI中英文切换功能，感受中文切换的效果

1.2安装国际化的包

npm i vue-i18n@8.22.2
1

请注意版本号。vue-i18n现在有了一个新版本，对应的api有些不兼容，请还是使用8.22.2这个版本!

1.3 ElementUI多语言配置

引入element语言包文件src/lang/index.js

 // 进行多语言支持配置
    import Vue from 'vue' // 引入Vue
    import VueI18n from 'vue-i18n' // 引入国际化的插件包
    import locale from 'element-ui/lib/locale'
    import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
    import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
    Vue.use(VueI18n) // 全局注册国际化包
    // 创建国际化插件的实例
    const i18n = new VueI18n({
      // 指定语言类型 zh表示中文  en表示英文
      locale: 'zh',
      // 将elementUI语言包加入到插件语言数据里
      messages: {
        // 英文环境下的语言数据
        en: {
          ...elementEN
        },
        // 中文环境下的语言数据
        zh: {
          ...elementZH
        }
      }
    })
    // 配置elementUI 语言转换关系
    locale.i18n((key, value) => i18n.t(key, value))
    export default i18n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1.4 在main.js中挂载 i18n的插件

// 省略其他...
    import i18n from '@/lang'
    // 加入到根实例配置项中
    new Vue({
      el: '#app',
      router,
      store,
      i18n,
      render: h => h(App)
    })

1
2
3
4
5
6
7
8
9
10
11

1.5 验收效果

在src/lang/index.js中手动修改locale属性，改成zh 或者 en 查看日历组件的星期显示

2.自定义内容多语言配置

2.1 引入自定义多语言配置

在src注：自定义语言配置文件在项目资源/语言包里面

    |- src
    			|-lang
    						|-index.js
    						|-en.js # 从资源包中拷入的
    						|-zh.js # 从资源包中拷入的

1
2
3
4
5
6

2.2配置

src/lang/index.js

    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    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: 'zh',
      messages: {
        en: {
          ...elementEN, // 将饿了么的英文语言包引入
    +     ...customEN   // 将自定义英文包加入
        },
        zh: {
          ...elementZH, // 将饿了么的中文语言包引入
    +     ...customZH   // 将自定义中文包加入
        }
      }
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.3 案例：实现title中英文切换

目标：公司的名字中英文切换

1. 准备两套翻译文案
   在en.js和zh.中分别设置companyName

2 修改模板渲染

用t(‘属性名’)来生成标题。这里的t是引入了i18n之后，自动挂载在vue实例上的功能。

<div class="app-breadcrumb">
      {{ $t('navbar.companyName') }}
      <span class="breadBtn">体验版</span>
    </div>
1
2
3
4

手动将locale进行en和zh切换查看效果

src/lang/index.js

    export default new VueI18n({
      // 切换这里试试 en
      locale: 'zh'
      ...
    })

1
2
3
4
5
6
7
8

2.4 理解中英文切换原理

当我们引入VueI18n语言插件之后，每个组件实例都拥有了一个$t方法，这个方法可以帮助我们进行语言转换，可以根据当前的语言类型，使用传入的key去寻找当前key对应的文本，基础原理如下图：

3. 实现动态切换中英文-封装组件

背景：现在我们虽然已经实现了中英文切换的核心逻辑，但是是死的，不能动态切换

3.1目标

3.2 思路
点击下拉框时把当前选择的语言赋值给this.$i18n.local封装多语言组件

3.3 封装多语言组件
在放置公共组件的位置： src/components/Lang/index.vue
e属性即可

<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>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success('切换多语言成功')
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.4 全局注册
在component/index.js中进行全局组件注册

import Lang from './Lang'
export default {
  // 插件的初始化, 插件给你提供的全局的功能, 都可以在这里配置
  install(Vue) {
    // 进行组件的全局注册
    Vue.component('Lang', Lang)
  }
}
1
2
3
4
5
6
7
8

3.5 在Navbar组件中引入使用组件

<!-- 语言包 -->
<lang class="right-menu-item" />
<!-- 全屏组件 -->
<screen-full class="right-menu-item" />
1
2
3
4

4.多语言解决方案

包：vue-i18n
在main.js中，实例化vue对象，有一个特殊的设置项：

import i18n from '@/lang/index.js' // 设置一次，在其他项目也可以继续使用
new Vue({
  router,
  store...,
  i18n
})
1
2
3
4
5
6

视图代码：{{ $t(‘xx.xxxx’)}}

自动切换：this.$i18n.locale= ‘zh’

5.全屏功能-组件创建

思路
在顶部的工具栏中补充一个按钮，点它之后进行全屏展示。为了方便复用功能，把它注册成一个全局组件

5.1 创建组件

创建文件src/componets/ScreenFull/index.vue

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

注意：要想这个图片能正确显示，还必须在src\icons\svg下有对应的fullscreen.svg文件

5.2 注册全局组件
在components/index.js中，引入组件，并注册成全局

import ScreenFull from './ScreenFull'
const componentsPlugin = {
  install(Vue) {
    // 省略其他...
    Vue.component('ScreenFull', ScreenFull)
  }
}
1
2
3
4
5
6
7

5.3 使用全局组件
Layout/NavBar/index.vue

 <div class="right-menu">
    <lang class="right-menu-item" />

    <ScreenFull class="right-menu-item" />
    <el-dropdown class="avatar-container right-menu-item" trigger="click">

<style>
.right-menu-item {
   vertical-align: middle;
}
</style>
1
2
3
4
5
6
7
8
9
10
11

6. 全屏功能-实现全屏逻辑

6.1安装插件

npm i screenfull
1

6.2 使用插件
在全屏组件中引入

import screenfull from 'screenfull'
1

给icon 添加点击事件，在回调中使用使用插件的核心api

<svg-icon
   icon-class="fullscreen"
   class="fullscreen"
+  @click="toggleScreen"
/>
1
2
3
4
5

回调函数

toggleScreen () {
   screenfull.toggle()
}
1
2
3

7.全屏功能-实现全屏-图标切换

7.1 补充数据项

data () {
  return {
    isFullscreen: false
  }
}
1
2
3
4
5

7.2 在全屏切换时更改它的值

toggleScreen () {
  screenfull.toggle()
+ this.isFullscreen = !this.isFullscreen
}
1
2
3
4

7.3 图标切换

<svg-icon
+     :icon-class="isFullScreen ? 'exit-fullscreen' : 'fullscreen'"
      class="fullscreen"
      @click="toggleScreen"
    />
1
2
3
4
5

7.4 处理ESC按键
如果当前是全屏状态，按下ESC会恢复到普通状态，而此时组件中的数据项却没有变成false,所以导致图标没有及时修改过来。

解决方案：使用screenfull的事件监听

created() {
  // ESC会改变当前的全屏状态
    // screenfull是插件，它自带事件监听 on
    // screenfull.isFullscreen ：插件自带的属性，表示当前是否处于全屏状态
    screenfull.on('change', () => {
      console.log('当前是否是全屏', screenfull.isFullscreen)
      this.isFullScreen = screenfull.isFullscreen
    })
}

1
2
3
4
5
6
7
8
9
10

参考：https://www.npmjs.com/package/screenfull