【点击全屏放大】 vue js

最新推荐文章于 2023-10-17 18:01:03 发布

原创最新推荐文章于 2023-10-17 18:01:03 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

VUE 同时被 2 个专栏收录

43 篇文章

订阅专栏

javascript

30 篇文章

订阅专栏

这段代码展示了一个全屏放大功能的实现，通过点击‘全屏放大’按钮，将`myMap`元素设置为全屏显示。JavaScript部分处理了全屏模式的逻辑，考虑了不同浏览器的全屏API。CSS部分定义了容器和全屏按钮的样式。

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;
  }