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) :

// Support multi-language configuration
import Vue from 'vue' / / into the Vue
import VueI18n from 'vue-i18n' // Introduce internationalized plug-in packages
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // Introduce elementUI in English
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // Introduce elementUI's Chinese package
Vue.use(VueI18n) // Register internationalized packages globally

// Create an instance of the internationalization plug-in
const i18n = new VueI18n({
  // The language type is zh: Chinese. En: English
  locale: 'zh'.// Add the elementUI language package to the plug-in language data
  messages: {
    // Language data in English
    en: {
      ...elementEN
    },
    // Language data in The Chinese environment
    zh: {
      ...elementZH
    }
  }
})
// Configure the elementUI language transformation relationship
locale.i18n((key, value) = > i18n.t(key, value))

export default i18n
Copy 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...
import i18n from '@/lang'
// Add to the root instance configuration item
new Vue({
  el: '#app',
  i18n,
  render: h= > h(App)
})
Copy 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 by default
export default {
	menu: {username: 'Leo'
	},
	/ /... Omit other options
}
Copy the code

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

// Export by default
export default {
	menu: {username: '里奥'
	},
	/ /... Omit other options
}
Copy 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 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'
// Introduce a custom Chinese package
+ import customZH from './zh' 
// Introduce a custom English package
+ import customEN from './en' 

Vue.use(VueI18n)

// Create an instance of the internationalization plug-in
export default new VueI18n({
  // Specify the language type
  locale: 'zh'.messages: {
    en: {
      ...elementEN, // Introduce ele. me English language pack
+     ...customEN   // Add the custom English package
    },
    zh: {
      ...elementZH, // Introduce ele. me's Chinese language pack
+     ...customZH   // Add the custom Chinese package}}})Copy 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="'zh'=== $i18n.locale ""> 英 文</el-dropdown-item> <el-dropdown-itemcommand="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
Copy the code

2. Change the language

export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang // set to the local i18N plug-in
      this.$message.success('Switching to multiple languages succeeded')}}}Copy 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> <! Place an icon --> <div @click="hClick"> <! -- the fullscreen file must exist --> < svG-icon icon-class="fullscreen" :class="isScreenFull ? 'Zoom' : 'zoom '" />
  </div>
</template>

<script>
export default {
  name: 'ScreenFull'.data() {
    return { 
    	isScreenFull: false// Control the class}} of the SVG vector graph,createdScreenfull. On () {// Check whether screenfull is in the current state.'change', () => {
      console.log('Full screen', screenfull.isFullscreen)
      this.isScreenFull = screenfull.isFullscreen
    })
  },
  methods: {
    hClickToggle () {screenfull. Toggle () {screenfull. Toggle () {screenfull. Toggle () {screenfull. this.isScreenFull } } } </script> <style lang="scss" scoped>
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>
Copy the code

Register as a global component and use it

import ScreenFull from './ScreenFull'
const componentsPlugin = {
  install(Vue) {
    // omit other...
    // The component name is custom
    Vue.component('xxx', ScreenFull)
  }
}
Copy the code

Use this global component in other components

conclusion

Not small streams into rivers and seas