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

夏洛克丶旭發表於2018-12-16

VueUI元件

系列文章

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

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

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

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

i18n國際化多語言翻譯使用

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

使用npm安裝

新建資料夾src/i18n,目錄如下

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

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 需要要翻譯的內容要一一對照，我這裡這是參考示例只寫了一部分

//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/>'
})
複製程式碼

使用:

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

vue中使用ECharts

具體使用方法可以檢視ECharts官網，需要注意的地方就是響應螢幕大小

程式碼如下，在呼叫元件的頁面

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