VUE3中实现浏览器全屏功能 screenfull

排码的小拇指

于 2024-03-18 18:39:05 发布

阅读量638

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39186695/article/details/136817402

版权

VUE3中实现浏览器全屏功能

安装screenfull

npm install screenfull

在vue页面中引入

 import screenfull from 'screenfull'

定义全屏方法

const SetFullScreen = () => {

    //screenfull.isEnabled  此方法返回布尔值，判断当前能不能进入全屏

    if (!screenfull.isEnabled) {

        return false

    }

    //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏

    screenfull.toggle()

}

调用方法

  <el-tooltip
          class="box-item"
          effect="dark"
          content="全屏"
          placement="top"
        >
          <FullScreen
            @click="SetFullScreen"
            v-if="headBtnList?.find((n) => n == 'MD007_1_2')"
            style="
              width: 1.4em;
              height: 1.4em;
              color: var(--headerFontcolor);
              cursor: pointer;
              margin-right: 10px;
            "
          />
        </el-tooltip>