1、项目中使用的是sreenfull插件,执行命令安装
第一步:安装sreenfull插件:
在命令行中执行:(注:因为这是生产依赖,所以执行–save)当然你也可以在Vue的GUI的依赖选项中直接搜索screenfull来进行安装。

npm install screenfull  save

2、html代码

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

3、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();
    }
  }
};

完成以上操作,全屏功能即可实现。

Logo

前往低代码交流专区

更多推荐