前言
Vue项目中如何配合elementUI做国际化操作呢？能不能自定义多语言配置呢？一起来看看实现的步骤吧~
多语言国际化
一、国际化处理
国际化处理经常可以见到的场景，通过一个按钮，将一个网页的主要语言改变，也就是多语言一个处理。
1. 安装依赖包
Vue项目中多语言支持使用的是 vue-i18n
i18n: internationalization首尾字母，以及中间18位字符的缩写，译为国际化。
官网网址：Vue I18n
终端中运行npm i vue-i18n@8.22.2
2. 多语言配置
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' // 引入elementUI的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入elementUI的中文包
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
3. 挂载i18n插件
main.js中挂载i18n插件 代码如下（示例）：
// 省略其他...
import i18n from '@/lang'
// 加入到根实例配置项中
new Vue({
el: '#app',
i18n,
render: h => h(App)
})
二、自定义多语言配置
1. 自定义语言配置文件
以下两个文件里面的内容需要一一对应。
新建en.js文件
代码如下（示例）：
// 默认导出
export default {
menu:{
username: 'Leo'
},
// ...省略其他选项
}
新建zh-CN.js文件
代码如下（示例）：
// 默认导出
export default {
menu:{
username: '里奥'
},
// ...省略其他选项
}
2. 模板中渲染
当我们引入VueI18n语言插件之后，每个组件实例都拥有了一个$t方法，这个方法可以帮助我们进行语言转换，可以根据当前的语言类型，使用传入的key去寻找当前key对应的文本。
代码如下（示例）：
<div class="main">
{{ $t(menu.username) }}
</div>
3. 手动修改语言验收成果
代码如下（示例）：
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. 使用下拉框
elementUI官网：dropdown组件 elemenUI中提供了下拉框的组件，在官网复制结构。
- 给每一个下拉选项设置一个
command属性，属性值为之前message中定义好的方法名 - - 给下拉框监听一个
command的事件，这个事件可以拿到选中的下拉选项中command属性的属性值
<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>
2. 修改语言
export default {
methods: {
changeLanguage(lang) {
this.$i18n.locale = lang // 设置给本地的i18n插件
this.$message.success('切换多语言成功')
}
}
}
3. 效果演示
图标使用的是svg，之前有讲解如何在新项目中使用svg矢量图，这里就不做演示了。
全屏功能
一、 实现步骤
背景：浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen()，不过有兼容性问题，所以改用插件。
1. 安装依赖包
使用screenFull插件来提供全屏功能
npm i screenfull
2. 使用插件
新建实现全屏功能的组件,文件名自定义
<template>
<!-- 放置一个图标 -->
<div @click="hClick">
<!-- fullscreen 文件必须存在-->
<svg-icon icon-class="fullscreen" :class="isScreenFull ? '缩小' : '放大'" />
</div>
</template>
<script>
export default {
name: 'ScreenFull',
data() {
return {
isScreenFull: false // 控制svg矢量图的class
}
},
created() {
// 判断当前是否处于全屏状态
screenfull.on('change', () => {
console.log('是否全屏', screenfull.isFullscreen)
this.isScreenFull = screenfull.isFullscreen
})
},
methods: {
hClick() {
screenfull.toggle() // 触发change事件
// 全屏状态下按ESC也可以退出全屏状态
// 不能简单的切换状态,需要监听到窗口变化再改变状态
// this.isScreenFull = !this.isScreenFull
}
}
}
</script>
<style lang="scss" scoped>
.fullscreen {
width: 20px;
height: 20px;
color: #fff;
cursor: pointer;
}
</style>
注册为全局组件,使用即可
import ScreenFull from './ScreenFull'
const componentsPlugin = {
install(Vue) {
// 省略其他...
// 组件名自定义
Vue.component('xxx', ScreenFull)
}
}
在其他组件中使用这个全局组件即可
总结
不积小流无以成江海
