vue按键全屏和F11全屏共存；只是全屏想要的元素

前端小云儿

于 2024-09-29 16:48:04 发布

阅读量11

点赞数

分类专栏： vue技能提升文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/jieweiwujie/article/details/142639036

版权

vue技能提升专栏收录该内容

55 篇文章 2 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

<template>
  <div>只是全屏想要的元素</div>
  <div>
    <div style="width: 1300px; height: 300px; background-color: cyan" id="div1">
      vue按键全屏和F11全屏共存
      <br />
      <button @click="fullScreenFun">
        {
  { fullScreen ? "退出全屏" : "全屏" }}按钮
      </button>
      vue按键全屏和F11全屏共存
    </div>

    <div style="background-color: #f1ff">其他无需全屏的内容</div>
  </div>
</template>

<script>
export default {
  name: "Screenfull",
  data() {
    return {
      fullScreen: false, //是否全屏 默认否
    };
  },
  mounted() {
    // 监听onresize事件
    window.onresize = () => {
      console.log("检查当前是否全屏", this.ch