第一步,安装依赖
安装screenfull.js依赖包
npm install screenfull -S
第二步,添加组件
图标,样式等内容可以根据自己需求改
<template>
<span
:class="isFullscreen ? 'ilink-icon-tuichuquanping' : 'ilink-icon-quanping'"
@click="handleClick">
</span>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'Screenfull',
data() {
return {
isFullscreen: false
}
},
mounted() {
this.init()
},
beforeDestroy() {
this.destroy()
},
methods: {
init() {
if (screenfull.isEnabled) {
screenfull.on('change', this.handleChange)
}
},
destroy() {
if (screenfull.isEnabled) {
screenfull.off('change', this.handleChange)
}
},
handleClick() {
if (!screenfull.isEnabled) {
this.$message({
message: '您的设备不支持全屏',
type: 'warning'
})
return false
}
screenfull.toggle()
// 也可以传入需要全屏的元素
// screenfull.toggle(document.getElementById('my-screen-box'));
},
handleChange() {
this.isFullscreen = screenfull.isFullscreen;
}
}
}
</script>
第三步,引用
import Screenfull from '@/components/Screenfull/index.vue'
export default {
...
components: {
Screenfull
}
}
<screenfull></screenfull>