vue 全屏组件

第一步，安装依赖

安装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.enabled) {screenfull.on('change', this.handleChange)}},destroy() {if (screenfull.enabled) {screenfull.off('change', this.handleChange)}},handleClick() {if (!screenfull.isEnabled) {this.$message({message: '您的设备不支持全屏',type: 'warning'})return false}screenfull.toggle()},handleChange() {this.isFullscreen = screenfull.isFullscreen;}}}
</script>

第三步，引用

import Screenfull from '@/components/Screenfull/index.vue'export default {...components: {Screenfull}
}

<screenfull></screenfull>