vue-admin-template_home增加全屏开关

1. 安装

npm install screenfull --save

这个指令安装最新版本

npm install screenfull@3

VUE2.x的可以指定对应的版本,这样是安装最新的3.x的版本

2. 导入svg文件

在src\icons\svg文件夹下,导入exit-fullscreen.svgfullscreen.svg,

exit-fullscreen.svg,新建这个文件再将以下代码复制到这个文件就OK了

fullscreen.svg,同理新建这个文件再将以下代码复制到这个文件就OK了

3. 在\src\components目录下创建screenfull文件夹,创建index.vue文件,封装screenfull


  
  
  
  
  

4.然后进入src/layout/components/Navbar.vue,script脚本中进入组件

vue-admin-template_home增加全屏开关_第1张图片

5.引用screenfull组件

vue-admin-template_home增加全屏开关_第2张图片

以上步骤就可以将全屏放大缩小的按钮加到框架了,效果显示:

你可能感兴趣的:(vue.js,javascript,前端)