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.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>