Vue项目中实现全屏及相应的图标切换

一.实现全屏的效果

背景：浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen()，不过有兼容性问题，所以改用插件。

安装插件

npm i screenfull

使用插件

在全屏组件中引入

import screenfull from 'screenfull'

给icon 添加点击事件，在回调中使用使用插件的核心api



回调函数

toggleScreen () {

screenfull.toggle()

}

实现图标的切换

效果:

1.先是准备2个svg的图标

2.在svg标签中的icon-class中使用

3.定义istoggle为false

4.点击图片取反,响应的展现不同的图表

解决ESC退出全屏之后,对应的图标不发生改变

原因:我们写的代码是点击了图标,然后才会实现全屏的效果,但是esc并不是点击图标,所以他不发生改变

解决办法:

screenfull插件自带了change事件,screenfull.isFullscreen是当前的全屏的状态,是Boolean值,监测是否全屏的状态,及时转变即可

全部代码: