The VUE project implements internationalization and full screen functionality

preface

How does internationalization work with elementUI in a Vue project? Is it possible to customize multi-language configurations? Let’s take a look at the implementation steps

Multilingual internationalization

First, international processing

Internationalization processing can often be seen in the scenario of a button that changes the main language of a web page, that is, a multi-language processing.

1. Install dependency packages

The multi-language support used in the Vue project is vuE-I18N: Internationalization using the first and last letters of vue-I18N: the middle 18-character abbreviation. Official website: Vue I18n

Run NPM I [email protected] on the terminal

2. Configure multiple languages

SRC /lang/index.js file. The code is as follows (example) :

Import Vue from 'Vue' // Import Vue import VueI18n from 'vue-i18n' // Import internationalized plug-in package import locale from 'element-ui/lib/locale' import elementEN from 'element-ui/lib/locale/lang/en' import elementEN from 'elementUI /lib/locale/lang/en 'elementUI /lib/locale/lang/ zh-cn' // Import the elementUI Chinese package vue. use(VueI18n) // global registration internationalization package // create an instance of internationalization plug-in const i18n = new VueI18n({// set the language type zh to Chinese en to English locale: 'zh', // set the language package elementUI to messages: {// Set the language data in English en: {... ElementEN}, // Language data in Chinese environment zh: {... ElementZH}}}) // Configure the elementUI language conversion relationship locale.i18n((key, value) => i18n.t(key, value)) export default i18n Copies the codeCopy the code

3. Mount the I18N plug-in

The code for mounting the i18n plug-in in main.js is as follows (example) :

// omit other... New Vue({el: '#app', i18n, render: h => h(app)}) copy codeCopy the code

2. Custom multi-language configuration

1. Customize the language configuration file

The contents of the following two files must correspond one by one. The code for creating a new en.js file is as follows (example) :

Export default {menu:{username: 'Leo'}, //... Omit other options} copy codeCopy the code

The code for creating the zh-cn. js file is as follows:

Export default {menu:{username: 'Leo'}, //... Omit other options} copy codeCopy the code

2. Render in the template

When we introduced the VueI18n language plug-in, each component instance had a $t method that helped us translate the language by using the incoming key to find the text corresponding to the current key, based on the current language type. The code is as follows (example) :

<div class="main"> {{$t(menu.username)}} </div> Copy codeCopy the code

3. Manually modify the language acceptance results

The code is as follows (example) :

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 customZH from './zh' // Import customZH from' CustomEN from './en' vue. use(VueI18n) export default new VueI18n({// Specify the language type locale: 'zh', messages: { en: { ... ElementEN, // Introduce ele. me English language pack to +... CustomEN // Add the custom English package to}, zh: {... ElementZH, // Introduce ele. me Chinese language pack to +... CustomZH // Add the custom Chinese package to the}}}) copy codeCopy the code

Iii. Use in the project

1. Use the drop-down list box

ElemenUI provides the component of the dropdown box. Copy the structure on elementUI.

  • Set one for each drop-down optioncommandProperty, the value of which is the method name defined previously in Message

–

  • Listen for one for the dropdowncommandThe event can be picked up in the drop-down selectioncommandAttribute value of an attribute
<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="'en'=== $i18N. locale "> Chinese </el-dropdown-item> <el-dropdown-item command="en" :disabled="'en'=== $i18N. locale ">en</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> Copy codeCopy the code

2. Change the language

export default { methods: {changeLanguage(lang) {this.$i18n.locale = lang // set to the local i18N plugin this.$message.success(' Switching languages successfully ')}}} copy codeCopy the code

3. Effect demonstration

The ICONS are in SVG, but I won’t show you how to use SVG vector diagrams in a new project.

Full screen function

1. Implementation steps

Background: the browser comes with full screen function document. DocumentElement. WebkitRequestFullScreen (), but there are compatibility issues, so use the plug-in.

1. Install dependency packages

Use screenFull plugin to provide full screen functionality NPM I screenFull

2. Use plug-ins

Create a component that implements the full-screen function and customize the file name

<template> <! <div @click="hClick"> <! < svG-icon icon-class="fullscreen" :class="isScreenFull? </div> </template> <script> export default {name: 'ScreenFull', data() {return {isScreenFull: Screenfull. On ('change', () => {console.log(' full screen ', () => {console.log(' full screen ', () => {console.log(' full screen ', () => {console.log(' full screen ', screenfull.isFullscreen) this.isScreenFull = screenfull.isFullscreen }) }, methods: Toggle () {hClick() {screenfull.toggle() // If you are in full screen mode, press ESC to switch to full screen mode. // If you are in full screen mode, press ESC to switch to full screen mode ! this.isScreenFull } } } </script> <style lang="scss" scoped> .fullscreen { width: 20px; height: 20px; color: #fff; cursor: pointer; } </style> Copy the codeCopy the code

Register as a global component and use it

Import ScreenFull from './ScreenFull' const componentsPlugin = {install(Vue) {// Vue.component(' XXX ', ScreenFull)}} Copy codeCopy the code

Use this global component in other components