vue全屏某个dom元素(包括退出全屏、监听)
1、话不多说直接上源码
一、左上角的图标是随着DOM 元素是否全屏而改变的
二、用isFullscreen来监听DOM是否全屏
三、 用screenfull.toggle(element)来使元素进入、退出全屏
<template>
<div id="button" style="background-color: red;width: 200px;height: 200px;">
<svg-icon
:icon-class="isFullscreen?'exit-fullscreen':'fullscreen'"
style="width:20px;height: 20px;color: #24da70"
@click="buttoncli"
/>
</div>
</template>
<script>
import screenfull from 'screenfull'
// 全屏功能使用:1.安装,npm install --save screenfull
// 2.引入
// 3.点击时判断浏览器是否可全屏,不可全屏给提示,可全屏执行screenfull.toggle()
export default {
data() {
return {
isFullscreen: false
}
},
mounted() {
this.init()
},
methods: {
buttoncli() {
const element = document.getElementById('button')
if (!screenfull.enabled) { // 如果不允许进入全屏,发出不允许提示
this.$message({
message: '不支持全屏',
type: 'warning'
})
return false
}
screenfull.toggle(element)
},
change() {
this.isFullscreen = screenfull.isFullscreen
},
init() {
if (screenfull.enabled) {
screenfull.on('change', this.change)
}
},
destroy() {
if (screenfull.enabled) {
screenfull.off('change', this.change)
}
}
}
}
</script>
效果如下图
未全屏状态
全屏状态
如果有用请点赞,您的支持是对我最大的鼓励!!!