全屏-多语言-tab页-主题切换

全屏插件的引用

目标：实现页面的全屏功能

基本介绍 和 组件创建

全屏功能可以借助一个插件来实现   (将来插件的api, 可以到npm上找!)

底层:

1 开启全屏: document.documentElement.requestFullscreen()

2 关闭全屏: document.exitFullscreen()

第一步，安装全局插件screenfull

第二步，封装全屏显示的组件 src/components/ScreenFull/index.vue

第三步，全局注册该组件  src/components/index.js

第四步，放置于layout/navbar.vue中

样式:

准备全屏的 svg 图标

svg-icon 图标组件使用步骤:

1. 写一个 svg-icon 组件

1. 加 icon-class 属性即可指定使用哪个图标

全屏功能实现

全局插件 screenfull 已安装过, 这里可以使用它的 api 完成功能

导入: import ScreenFull from 'screenfull'

属性: ScreenFull.isEnabled 获取浏览器是否支持全屏, 支持, 就返回 true

方法: ScreenFull.toggle()  切换全屏状态

多语言实现(体力活 - 翻译工作)

目标实现国际化语言切换 介绍 | Vue I18n

初始化多语言包

本项目使用国际化 i18n 方案。通过 vue-i18n而实现。

第一步，我们需要首先国际化的包

第二步，需要单独一个多语言的实例化文件 src/lang/index.js

上面的代码的作用是将Element的两种语言导入了

第三步，在main.js中对挂载 i18n的插件，并配置ElementUI的中英切换逻辑

引入自定义语言包

此时，element已经变成了zh，也就是中文，但是我们常规的内容怎么根据当前语言类型显示？

这里，针对英文和中文，我们可以提供两个不同的语言包 src/lang/zh.js , src/lang/en.js

在index.js中同样引入该语言包

在左侧菜单中应用多语言包

自定义语言包的内容怎么使用?

在左侧菜单应用

当我们全局注册i18n的时候，每个组件都会拥有一个$t的方法，  $t 方法会被挂载到 vue 原型上

它会根据传入的key，自动的去寻找当前语言的文本，  $t('navbar.title')

1. 我们可以自己添加一些中英翻译, 将头部翻译成中英文

      2.我们可以将左侧菜单变成多语言展示文本

   layout/components/SidebarItem.vue

注意：当文本的值为嵌套时，可以通过$t('key1.key2.key3...')的方式获取

现在，我们已经完成了多语言的接入，现在封装切换多语言的组件

封装多语言组件 - 切换语言

封装多语言组件  src/components/Lang/index.vue

component/index.js全局注册

在Navbar组件中引入

最终效果