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>