春风项目四线(合箱线、总装线)
wujian
2024-04-25 c6aaadcc026c1380922f53b31b213a20eb8bbee0
提交 | 用户 | 时间
fd2207 1 <template>
2   <div>
3     <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
4   </div>
5 </template>
6
7 <script>
8 import screenfull from 'screenfull'
9
10 export default {
11   name: 'Screenfull',
12   data() {
13     return {
14       isFullscreen: false
15     }
16   },
17   mounted() {
18     this.init()
19   },
20   beforeDestroy() {
21     this.destroy()
22   },
23   methods: {
24     click() {
25       if (!screenfull.isEnabled) {
26         this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
27         return false
28       }
29       screenfull.toggle()
30     },
31     change() {
32       this.isFullscreen = screenfull.isFullscreen
33     },
34     init() {
35       if (screenfull.isEnabled) {
36         screenfull.on('change', this.change)
37       }
38     },
39     destroy() {
40       if (screenfull.isEnabled) {
41         screenfull.off('change', this.change)
42       }
43     }
44   }
45 }
46 </script>
47
48 <style scoped>
49 .screenfull-svg {
50   display: inline-block;
51   cursor: pointer;
52   fill: #5a5e66;;
53   width: 20px;
54   height: 20px;
55   vertical-align: 10px;
56 }
57 </style>