vue局部全屏

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

宁！！飞行员

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

阅读量411

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_42617070/article/details/128240610

版权

vue局部全屏：

例如：需要elementui表格全屏或者某个div进行全屏

全屏代码

在组件内部使用$refs调用HTML5的Fullscreen API，可以实现局部全屏。

//如我想要使此div全屏
 <div ref="tree" @click="treeFullscreen">我的div</div>
 // 全屏方法
	treeFullscreen() {
      let target = this.$refs.tree;
      if (target.requestFullscreen) {
        target.requestFullscreen();
      } else if (target.mozRequestFullScreen) {
        target.mozRequestFullScreen();
      } else if (target.webkitRequestFullscreen) {
        target.webkitRequestFullscreen();
      } else if (target.msRequestFullscreen) {
        target.msRequestFullscreen();
      }
    },