1. screenfull介绍
官网地址:https://github.com/sindresorhus/screenfull.js
2. 依赖安装
npm install --save screenfull
这里我在安装后有报错,默认给我安装的是6.0版本,后来我重新安装5.1.0版本报错消失
3. 引入
import screenfull from "screenfull"
4. 案例展示
<template>
<div>
<div v-show="!isFullscreen" class="in-img" @click="fullScreen"></div>
<div v-show="isFullscreen" class="out-img" @click="fullScreen"></div>
</div>
</template>
<script>
//引入
import screenfull from 'screenfull'
export default {
name: "",
components: {
},
props: {},
data () {
return {
isFullscreen: false // 定义一个判断当前是否为全屏的变量
};
},
computed: {},
watch: {},
created () { },
mounted () {
this.init()
},
methods: {
init () {
if (screenfull.isEnabled) {
screenfull.on('change', this.fullChange)
}
},
//切换
fullScreen () {
if (!screenfull.isEnabled) {
return false
}
//全屏
screenfull.toggle();
},
fullChange () {
this.isFullscreen = screenfull.isFullscreen
}
},
destroy () {
if (screenfull.isEnabled) {
screenfull.off('change', this.fullChange)
}
}
};
</script>
<style lang="less" scoped>
</style>
用作本人工作中所遇的记录。