Realização do efeito de exibição em tela inteira do Vue

1. O plug-in sreenfull é usado no projeto, execute o comando para instalar
Etapa 1: Instale o plug-in sreenfull:
execute na linha de comando: (Nota: porque esta é uma dependência de produção, então execute –save) Claro, você também pode usar a GUI do Vue Pesquise a tela cheia diretamente nas opções dependentes para instalar.

npm install screenfull  save

2. código html

<el-tooltip content="全屏缩放" effect="dark" placement="bottom" fullscreen>
     <screenfull id="screenfull" class="el-icon-full-screen" @click="isScreenFull" />
</el-tooltip>

3. Código de script

<script>
//引入全屏插件
import screenfull from "screenfull";
data() {
    return {
      isFullscreen: false
    };
  },
  methods: {
      //全屏方法
    isScreenFull() {
      // 需要注意的是 如果判断!screenfull.enabled 显示的是不支持全屏的话 是因为谷歌的版本问题  判断改为 !screenfull.isEnabled  就可以了

      if (!screenfull.isEnabled) {
        // 如果不支持进入全屏，发出不支持提示
        this.$message({
          message: "您的浏览器版本过低不支持全屏显示！",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle();
    }
  }
};

Depois de concluir as operações acima, a função de tela inteira pode ser realizada.