vue点击按钮实现让页面的某一个元素全屏展示

 mounted () {
        const element = document.getElementById('map_container');
        document.getElementById('full_screen').addEventListener('click', () => {
            if (screenfull.isEnabled) {
                screenfull.request(element);
            }
        });
    },

npm install screenfull@4.2.0 --save

import screenfull from "screenfull";

<div class="one" @click="btn">
            <i
              class="iconfont icon-quanping1"
              style="margin-top: 1px;"
            ></i>
          </div>

btn() {
      document.documentElement.webkitRequestFullScreen(); //进入全屏
      screenfull.toggle();//全屏显示
    },

    <div
        :class="isCollapse ? 'ifa-collapsed' : 'ifa'"
        ref="full_el"
        id="screen"
      >
        <router-view />
      </div>

  btn() {
       let element = document.getElementById("screen"); //指定全屏区域元素
        screenfull.toggle(this.element); //全屏显示
    },

data() {
    return {
      isFull:'',//全屏检查
      }
   }
watch: {
    isFull(newvalue, oldvalue) {
      console.log("我监听到了");
       event.keyCode=0;
       
      this.$router.go(-1);
    },
  },
methods: {
      checkFull() {
      let isFull = window.fullScreen || document.webkitIsFullScreen;
      this.isFull = isFull;
      console.log("isfull"+this.isFull);
    },
 },
created() {
     window.onresize = () => {
      //调用判断全屏的方法，用来监听
      this.checkFull();
    };
  },

        window.addEventListener("resize", () => {
          this.myChart.resize(),//可以自定义添加多个方法
           this.checkFull();
        });