You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.1 KiB
57 lines
1.1 KiB
<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>
|
|
|