【点击全屏放大】 vue js

最新推荐文章于 2024-04-28 08:02:36 发布

原创最新推荐文章于 2024-04-28 08:02:36 发布

· 177 阅读

0 ·

版权

文章标签：

#javascript #vue.js #前端

VUE 同时被 2 个专栏收录

43 篇文章

订阅专栏

javascript

30 篇文章

订阅专栏

html

   <div class="rightbox ml-16">
          <div class="full" @click="clickFull">全屏放大</div>
          <div id="myMap" class="myMapClass" ref="myMap"></div>
     </div>

clickFull() {
      var element = document.getElementById('myMap')
      element.style.width = '100%'
      element.style.height = '100%'
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },

css

 .rightbox {
    width: 70%;
    border: 1px solid #ccc;
    position: relative;
  }
  .full {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    border: 1px solid #ccc;
    padding: 10px 10px;
    text-align: center;
    background-color: #fff;
  }
  .myMapClass {
    width: 100%;
    height: 600px;
  }