Vue 全屏插件 screenfull的使用

最新推荐文章于 2025-03-08 09:18:49 发布

半夏_2021

最新推荐文章于 2025-03-08 09:18:49 发布

阅读量4.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： screenfull vue vue 全屏插件

本文链接：https://blog.youkuaiyun.com/fd2025/article/details/124207955

Vue 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了如何在Vue2项目中使用npm iscreenfull库实现图表的全屏功能，包括正确安装版本5.1.0以避免兼容问题，组件引入方式，以及在图标上添加点击事件以切换全屏状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装组件

npm i screenfull@5.1.0

注意: 如果你使用的是vue2,则使用5.1.0，因为默认安装版本是 6.0，在vue2环境下会报错

2.在需要引入的组件中引入

import screenfull from 'screenfull'

2.使用
首先找到全屏的图表
在这里插入图片描述
在这个使用的ali iconfont

    <div class="screenfull_icon fr" @click="screenfull">
      <i :class="iconclass"  style="font-size:40px"></i>
    </div>

js代码如下

<script>
import screenfull from 'screenfull'
export default {
  name: "header",
  data() {
    return {
        iconclass: [],
        fullscreen:['icon','iconfont','icon-fullscreen'],
        exitFullscreen:['icon','iconfont','icon-fullscreen-exit']
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (screenfull.isEnabled) {
        this.iconclass = this.fullscreen;
        screenfull.on('change', this.change)
      }
    },

    change() {
      if(screenfull.isFullscreen){
        this.iconclass = this.exitFullscreen;
      }else{
        this.iconclass = this.fullscreen;
      }
    },
    screenfull(){
    if (!screenfull.isEnabled) {
        this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
        return false
      }
      screenfull.toggle();
    },
};
</script>