Vue--多语言转换及全屏功能

本文已参与[新人创作礼]活动，一起开启掘金创作之路。

一.多语言

1. 下语言包"vue-i18n": "8.22.2"

yarn add vue-i18n@8.22.2

注意：i18n与router,vuex同属于针对vue开发的插件

2.创建src/lang/index.js 设置需求,

(1)准备翻译的语言环境信息

(2)通过选项创建 VueI18n 实例

import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

// 准备翻译的语言环境信息
const messages = {
  en: {
    message: {
      hello: "hello world",
    },
  },
  ja: {
    message: {
      hello: "こんにちは、世界",
    },
  },
};
// 通过选项创建 VueI18n 实例
const i18n11 = new VueI18n({
  locale: "en", // 设置地区
  messages, // 设置地区信息
});

export default i18n11;

3.在src/main.js中全局引入src/lang/index.js暴露的i18n11

import i18n11 from "./lang";

new Vue({
  el: "#app",
  router,
  store,
  i18n: i18n11,//这里这里
  render: (h) => h(App),
});

注意： i18n: i18n11前i18n为组件,i18n11为组件名

4.在vue文件中使用

<p>{{ $t("message.hello") }}</p>

效果1

效果2:更改语言

// 通过选项创建 VueI18n 实例
const i18n11 = new VueI18n({
  locale: "ja", // 设置地区
  messages, // 设置地区信息
});

5.自定义语言包

(1)在src/lang中创建en.js

export default {
  route: {
    dashboard: "Dashboard",
    manage: "manage",
    users: "users",
    menus: "menus",
    // permissions: 'permissions',
    logs: "logs",
    example: "example",
    table: "table"
    }
  }

(2)在src/lang/index.js中引入自定义英文包

// 引入自定义英文包
import customEN from "./en";

(3)在src/lang/index.js的 messages 中

const messages = {
  en: {
    message: {
      hello: "hello world",
      name: "you",
    },
    ...customEN,
  },
  ...
}

6. 若给elementUI配置的内容

(1)需要在src/lang/index.js中引入

  import elementEN from 'element-ui/lib/locale/lang/en'

(2)配置elementUI 语言转换关系

    locale.i18n((key, value) => i18n.t(key, value))

7.左侧菜单多语言

(1)title需要与语言包中相对应

(2)菜单栏渲染

二.全屏

hr/src/components/fullScreen/index.vue

<template>
  <div style="margin: 0 20px; color: #fff; font-size: 30px">
    <i class="el-icon-full-screen" @click="setScreenfull" />
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: 'FullScreen',
  data() {
    return {
      isFullscreen: false
    }
  },
  computed: {},
  created() {},
  methods: {
    setScreenfull() {
      if (!screenfull.isEnabled) {
        // 如果不允许进入全屏，发出不允许提示
        this.$message({
          message: '暂不不支持全屏',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.$message({
        message: '全屏开启',
        type: 'success'
      })
    }
  }
}
</script>
<style lang="less" scoped></style>