<template> <div> <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> </div> </template> <script> import screenfull from 'screenfull' export default { name: 'Screenfull', data() { return { isFullscreen: false } }, mounted() { this.init() }, beforeDestroy() { this.destroy() }, methods: { click() { if (!screenfull.isEnabled) { this.$message({ message: '你的浏览器不支持全屏', type: 'warning' }) return false } screenfull.toggle() }, change() { this.isFullscreen = screenfull.isFullscreen }, init() { if (screenfull.isEnabled) { screenfull.on('change', this.change) } }, destroy() { if (screenfull.isEnabled) { screenfull.off('change', this.change) } } } } </script> <style scoped> .screenfull-svg { display: inline-block; cursor: pointer; fill: #5a5e66;; width: 20px; height: 20px; vertical-align: 10px; } </style>