Vue realiza pantalla completa y zoom

complemento de pantalla completa

1. Descargue el complemento npm i screenfull -S

1 通过screenfull插件进行实现
 npm i screenfull@5 -S

安装完在package.json当中可以看到安装

2. Introduzca este complemento en la página requerida

在所需的页面引入
import screenfull from "screenfull";

elemento-ui

3 alternar es la forma de controlar la pantalla completa y salir de la pantalla completa

data() {
    
    
    return {
    
    
      value: "",
      isFull: false, //是否全屏
    };
  },

<div class="full" @click="full">
      <!-- 全屏 -->
      <span class="el-icon-full-screen" v-show="isFull"></span>
      <!-- 不是全屏 -->
      <span class="el-icon-rank" v-show="!isFull"></span>
    </div>

Aquí está el ícono en element-ui
y luego

methods: {
    
    
    full() {
    
    
      screenfull.toggle();
      if (!screenfull.isEnabled) {
    
    
        this.$message({
    
    
          message: "该浏览器不支持全屏功能",
          type: "warning",
        });
      }
      this.isFull = !this.isFull
    },
  },

Vista

 data() {
    
    
    return {
    
    
      fullscreen: false,
    };

  <Tooltip content="全屏" placement="left">
      <Icon
        v-show="!fullscreen"
        type="md-expand"
        @click="fullScreen"
        style="margin-right: 80px"
        size="25"
      />
    </Tooltip>
    <Tooltip content="退出全屏" placement="left">
      <Icon
        v-show="fullscreen"
        type="md-expand"
        @click="fullScreen"
        style="margin-right: 80px"
        size="25"
      />
    </Tooltip>

//全屏
    fullScreen() {
    
    
      screenfull.toggle();
      if (!screenfull.isEnabled) {
    
    
        this.$Message.error("该浏览器不支持全屏功能");
      }
      this.fullscreen = !this.fullscreen;
    },