vue项目中通过使用screenful插件实现全屏

辣条小哥哥

已于 2023-03-10 15:18:43 修改

阅读量92

点赞数

分类专栏：前端 vue 文章标签： vue.js 前端 javascript

于 2023-03-10 15:09:08 首次发布

本文链接：https://blog.csdn.net/weixin_44090040/article/details/129443219

版权

vue 同时被 2 个专栏收录

77 篇文章 1 订阅

订阅专栏

前端

9 篇文章 1 订阅

订阅专栏

安装screenfull.js插件

npm install screenfull --save

在需要使用的地方，引入screenfull

import screenfull from 'screenfull'

<script>
import screenfull from 'screenfull'

export default {
  name: 'Screenfull',
  data() {
    return {
      isFullscreen: false,
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    toggle() {
      if (!screenfull.isEnabled) {
        this.$message.warning('你的浏览器不支持全屏')
        return false
      }
      screenfull.toggle()
    },
    change() {
      console.log(screenfull.isFullscreen)
      this.isFullscreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.isEnabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.isEnabled) {
        screenfull.off('change', this.change)
      }
    },
  },
}
</script>