科技

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

Vue I18N · 發表 2018-12-17 11:10:37

摘要：使用npm安裝新建資料夾 src/i18n ,目錄如下 i18n.js //i18n.js import Vue from 'vue' import locale from 'element-ui/lib/locale' i...

使用npm安裝

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

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

編輯器-markdown

框架目前只封裝了markdown，實時獲取 markdown , html , text 三種格式文字，支援內容回填，預設初始值，可以編輯已釋出的文章或者草稿

引用的 ofollow,noindex">Editor.md ,點選檢視外掛更多的使用方法

結束

vue-xuAdmin 只注重框架基礎功能，這幾個元件是我最近用到的，更多的元件內容根據專案需求可以自己去封裝。

如果你感覺這個框架或者這幾篇文章對你有所幫助，請去專案git上給個星點個star，感謝！orz

專案地址：

github： github.com/Nirongxu/vu…
碼雲： gitee.com/nirongxu/xu…

來源：稀土掘金