vue-i18n----实现国际化, screenfull------ 全屏功能插件的应用

一.事件一个简单国际化的步骤

(1)基本的步骤

1：安装    yarn add vue-i18n
2:导入src/lang/index.jsimport VueI18n from 'vue-i18n'
3:注册import Vue from 'vue'Vue.use(VueI18n)
4:实例化const  i18n=new VueI18n({locale:'当前语言的标识'，   // en:英文  zh:中文messages:{//  语言包en:{home:'home'},zh:{home:'首页'}}})5暴露出去  export default i18n6:挂载到main.jsimport i18n from '@/lang'new Vue({i18n})使用：<div>{
   {$t('home')}}</div>

（2）代码验证:

(index.js文件下)

// 1.导入vue-VueI18nimport VueI18n from "vue-i18n";// 2.注册
import Vue from "vue";
Vue.use(VueI18n);
// 3.实例化
const i18n = new VueI18n({locale: "zh",messages: {zh: {aaa: "哦哦哦",},en: {aaa: "ooo",},},
});
// 4.暴露
export default i18n;

(3)APP.vue

<template><div class=""><h1>{
   { $t("aaa") }}</h1><button @click="fn">点击进行切换</button></div>
</template><script>
export default {name: "",methods: {fn() {const langArr = ["zh", "en"];const _index = langArr.indexOf(this.$i18n.locale);this.$i18n.locale = langArr[1 - _index];},},
};
</script>

(4)Main.js(导入并且挂载)

import i18n from "@/lange/index";new Vue({i18n,render: (h) => h(App),
}).$mount("#app");

(5)效果图:

 实现了切换的效果

二.全屏功能插件的应用

1.下载screenfull插件

npm i screenfull

2.导入

import screenfull from "screenfull";

3.打印screenfull

解析:true实现全屏切换的效果。

4.代码验证:

<template><div class=""><button @click="fn">点击全屏</button></div>
</template><script>
// 1.导入screenfull
import screenfull from "screenfull";
export default {name: "",methods: {fn() {if (!screenfull.isFullscreen) {screenfull.toggle();}},},
};
</script><style scoped></style>

三.使用原生的方法实现全屏的效果

(1)判断是否能够全屏

document.fullscreenEnabled()

  (2)开启全屏

document.documentElement.requestFullscreen()

（3）关闭全屏

document.exitFullscreen()

注意: 存在兼容性的问题。