内容简介:使用npm安装新建文件夹cn.js和en.js 需要要翻译的内容要一一对照,我这里这是参考示例只写了一部分
使用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
三种格式文本,支持内容回填,默认初始值,可以编辑已发布的文章或者草稿
引用的 Editor.md ,点击查看插件更多的使用方法
结束
vue-xuAdmin 只注重框架基础功能,这几个组件是我最近用到的,更多的组件内容根据项目需求可以自己去封装。
如果你感觉这个框架或者这几篇文章对你有所帮助,请去项目git上给个星点个star,感谢!orz
项目地址:
- github: github.com/Nirongxu/vu…
- 码云: gitee.com/nirongxu/xu…
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 你知道几种继承方式?(结尾有彩蛋)
- c# – 将新节点添加到xml结尾的最快方法?
- 火星晨报0117:Grin首秀,日间最高涨幅800%;ETC 51%双花攻击戏剧性结尾:黑客归还全部所得ETC
- 手写一个解析器
- 手写一个webpack插件
- 从头手写一个Promise
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。