vue实现某容器点击放大至全屏

梁小茹

于 2023-02-06 14:25:06 发布

阅读量791

点赞数

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

本文链接：https://blog.csdn.net/weixin_46653486/article/details/128901090

版权

vue实现某容器点击放大至全屏。

摘要由CSDN通过智能技术生成

点击按钮放大至全屏
在这里插入图片描述

<div id="mapCodeID">
	<el-tooltip effect="dark" :content="fullscreen ? `缩小` : `放大`" placement="bottom">
	   <i class="el-icon-rank" @click="handleFullScreen"></i>
	</el-tooltip>
</div>

data里面：
fullscreen:false,

mounted() {
  this.$nextTick(() => {
      let WindowBrowerHeight = window.innerHeight
      if (this.WindowScreenHeight == WindowBrowerHeight) {
         this.fullscreen = true
      } else {
         this.fullscreen = false
      }
  });
    },
// 全屏事件
        handleFullScreen() {
            //   let element = document.documentElement   //全屏容器
            let element = document.getElementById("mapCodeID"); //需要全