全屏功能
安裝插件
npm i screenfull
全屏組件的封裝
<template>
<!-- 全屏 就是一個svg圖示-->
<div style="display:inline-block" @click="hClick">
<svg-icon :icon-class="isScreenFull ? 'exit-fullscreen': 'fullscreen'" class="fullscreen" />
</div>
</template>
<script>
//引入全屏組件
import screenfull from 'screenfull'
export default {
name: 'ScreenFull',
data() {
return { isScreenFull: false } //全屏和非全屏顯示倆個不同的圖示
},
created() {
//處理esc按鍵
//如果當前是全屏狀態，按下ESC會恢復到普通狀態，而此時組件中的資料項卻沒有變成false,所以導致圖示沒有及時修改過來，
//解決方案：使用screenfull的事件監聽
screenfull.on('change', () => {
console.log('是否全屏', screenfull.isFullscreen)
this.isScreenFull = screenfull.isFullscreen
})
},
methods: {
hClick() {
screenfull.toggle() // 觸發change事件
// this.isScreenFull = !this.isScreenFull
}
}
}
</script>
<style lang="scss" scoped>
.fullscreen {
width: 20px;
height: 20px;
color: #fff;
cursor: pointer;
}
</style>
參考：https://www.npmjs.com/package/screenfull
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297969.html
標籤：其他