Vue2.0 + ElementUI 手寫權限管理系統後臺模板（四）——組件結尾

時間 2019-11-30

標籤 vue2.0 vue elementui 手寫權限管理系統後臺模板組件結尾简体版

原文原文鏈接

系列文章

Vue2.0 + ElementUI 手寫權限管理系統後臺模板（一）——簡述css

Vue2.0 + ElementUI 手寫權限管理系統後臺模板（二）——權限管理html

Vue2.0 + ElementUI 手寫權限管理系統後臺模板（三）——頁面搭建vue

Vue2.0 + ElementUI 手寫權限管理系統後臺模板（四）——組件結尾git

i18n國際化多語言翻譯使用

框架採用`vue-i18n`版本 8.4.0，

使用npm安裝github

新建文件夾src/i18n,目錄以下 web

i18n.js

//i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './lang'

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',
  messages
})
locale.i18n((key, value) => i18n.t(key, value))

export default i18n
複製代碼

i18n/lang/index.js

//index.js
import en from './en'
import cn from './cn'
export default {
  en,
  cn
}
複製代碼

i18n/lang/cn.js

cn.js和en.js 須要要翻譯的內容要一一對照，我這裏這是參考示例只寫了一部分vuex

//cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
  home: '主頁',
  routeNmae: {
    home: '主頁',
    article: '文章管理',
    'menu2-2': '二級-2',
    'menu2-3': '二級-3',
  },
  rightMenu: {
    close: '關閉',
    closeOther: '關閉其餘',
    closeAll: '所有關閉'
  }

  ...zhLocale   // 合併element-ui內置翻譯
}

export default cn

複製代碼

i18n/lang/en.js

//en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
  home: 'home',
  routeNmae: {
    home: 'home',
    article: 'article',
    'menu2-2': 'menu2-2',
    'menu2-3': 'menu2-3'
  },
  rightMenu: {
    close: 'close',
    closeOther: 'closeOther',
    closeAll: 'closeAll'
  }
  ...enLocale   // 合併element-ui內置翻譯
}

export default en

複製代碼

多語言切換組件

新建src/components/lang/langSelect.vue

<!-- langSelect.vue -->
<template>
  <el-dropdown class='international' @command="handleSetLanguage">
    <div>
      <span class="el-dropdown-link"><i class="fa fa-language fa-lg"></i>&nbsp;{{language}}<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="cn">中文</el-dropdown-item>
      <el-dropdown-item command="en">English</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
複製代碼

main.js

import Vue from './btnPermission'
import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'
import 'font-awesome/css/font-awesome.css'

import App from './App.vue'
import router from './router'
import store from './vuex'
import i18n from './i18n/i18n'

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App),
  components: {App},
  template: '<App/>'
})
複製代碼

使用:npm

<!-- 翻譯使用 -->
<p>message: {{ $t('home') }}</p>
<p>message: {{ $t('routeNmae.article') }}</p>
<!-- 多語言切換組件調用 -->
<langSelect></langSelect>
複製代碼

vue中使用ECharts

具體使用方法能夠查看ECharts官網，須要注意的地方就是響應屏幕大小element-ui

代碼以下，在調用組件的頁面json

mounted () {
    this.selfAdaption()
  },
  methods: {
    // echart自適應
    selfAdaption () {
      let that = this
      setTimeout(() => {
        window.onresize = function () {
          if (that.$refs.echarts) {
            that.$refs.echarts.chart.resize()
          }
        }
      }, 10)
    }
  }
複製代碼