网页切换全屏显示，同F11功能

下载插件

npm install screenfull@5.0.1

HTML

<template>
  <div class="screenfull">
    <img :src="isFullScreen?'切换全屏图标':'切换小屏图标'" alt="" @click="handleScreen" />
  </div>
</template>

Script

<script>
//引入插件
import ScreenFull from "screenfull";
export default {
  data() {
    return {
      //动态显示图标
      isFullScreen: false,
    };
  },
  methods: {
    handleScreen() {
      // isEnabled判断当前浏览器是否支持大屏切换
      if (ScreenFull.isEnabled) {
        //toggle可以自动切换大屏 小屏的效果
        ScreenFull.toggle();
        // 切换大屏图标切换
        this.isFullScreen = !this.isFullScreen;
      } else {
        //利用Element UI的message实现提示
        this.$message.error("您的浏览器版本过低，暂不支持大屏切换");
      }
    },
  },
};
</script>