серия статей

Фоновый шаблон системы управления правами Vue2.0 + ElementUI (1) — краткое описание

Vue2.0 + ElementUI рукописный шаблон фона системы управления разрешениями (2) - управление разрешениями

Фоновый шаблон системы управления правами на рукописный ввод Vue2.0 + ElementUI (3) - построение страницы

Vue2.0 + ElementUI рукописный шаблон фона системы управления правами (4) - конец компонента

i18n интернационализированное использование многоязычного перевода

Рамочная программа принята`vue-i18n`Версия 8.4.0,

Установить с помощью нпм

новая папка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>&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 "vue"
import ElementUI from "element-ui"
import App from "./App.vue"
import router from "./router"
import store from "./vuex"
import i18n from "./i18n/i18n"
import globalPlugin from "./utils/global"
import permission from "./directive/permission/button"

import "element-ui/lib/theme-chalk/index.css"
import "@/assets/iconfont/iconfont.css"
import "font-awesome/css/font-awesome.css"
import "@/router/permission"

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(globalPlugin)
Vue.use(permission)

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>

Использование ECharts в vue

Чтобы узнать о конкретном методе использования, вы можете проверить официальный сайт 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,html,textТри формата текста, поддержка обратной засыпки контента, начальное значение по умолчанию, возможность редактирования опубликованных статей или черновиков

цитируетсяEditor.md, нажмите, чтобы увидеть другие способы использования плагина

Editor-wangeditor

Получить в режиме реального времениjson,html,textТри формата текста, поддержка обратной засыпки контента, начальное значение по умолчанию, возможность редактирования опубликованных статей или черновиков

цитируетсяwangeditor, нажмите, чтобы увидеть другие способы использования плагина

конец

vue-xuAdmin фокусируется только на основных функциях фреймворка. Эти компоненты — те, которые я использовал в последнее время. Другие компоненты могут быть инкапсулированы сами по себе в соответствии с потребностями проекта.

Если вы считаете, что этот фреймворк или эти статьи вам полезны, перейдите на проект git и поставьте звезду, спасибо! орз

адрес проекта: