【vue 双击进去全屏 esc退出全屏】

最新推荐文章于 2024-08-07 15:36:13 发布

小菜鸡一名来报道

最新推荐文章于 2024-08-07 15:36:13 发布

阅读量266

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57426442/article/details/134441888

版权

在Vue中，你可以通过v-on指令来监听元素的事件，包括双击事件。

展示了如何在Vue中绑定一个双击事件：

你也可以使用Vue的缩写语法@来绑定双击事件： @dblclick

任选！！！！

<template>
  <div v-on:dblclick="handleDoubleClick">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {},
  mounted() {},
  methods: {
    // 进入全屏
    handleDoubleClick(){ 
      let element = document.documentElement;
          if (this.fullscreen) {
              if (document.exitFullscreen) {
                  document.exitFullscreen();
              } else if (document.webkitCancelFullScreen) {
                  document.webkitCancelFullScreen();
              } else if (document.mozCancelFullScreen) {
                  document.mozCancelFullScreen();
              } else if (document.msExitFullscreen) {
                  document.msExitFullscreen();
              }
          } else {
              if (element.requestFullscreen) {
                  element.requestFullscreen();
              } else if (element.webkitRequestFullScreen) {
                  element.webkitRequestFullScreen();
              } else if (element.mozRequestFullScreen) {
                  element.mozRequestFullScreen();
              } else if (element.msRequestFullscreen) {
                  element.msRequestFullscreen();
              }
          }
          this.fullscreen = !this.fullscreen;
    }
  }
}
</script>