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