Vue2.0 + ElementUI 手写权限管理系统后台模板(四)——组件结尾

栏目: 编程语言 · 发布时间: 5年前

内容简介:使用npm安装新建文件夹cn.js和en.js 需要要翻译的内容要一一对照,我这里这是参考示例只写了一部分

使用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> {{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

项目地址:

Vue2.0 + ElementUI 手写权限管理系统后台模板(四)——组件结尾

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP经典实例

PHP经典实例

(美)斯克拉、(美)切贝特伯格 / 李松峰、秦绪文、李丽 / 中国电力出版社 / 2009-10 / 98.00元

PHP经典实例(第2版)能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边,大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起,足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中,您可以更加方便地找到各种编程问题的解决方案,《PHP经典实例(第2版)》中内容涵盖了:表单处理;Session管理;数据库交互;使用We......一起来看看 《PHP经典实例》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码