vue实现全屏与缩放

68 阅读 0 评论 45 点赞

我是靠谱客的博主霸气小丸子，最近开发中收集的这篇文章主要介绍vue实现全屏与缩放，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在这里插入图片描述

screenfull插件

1.下载插件 npm i screenfull -S

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

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

2.在需要的页面引入这个插件

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

element-ui

3 toggle就是控制全屏与退出全屏的方法

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>

这里用的是element-ui里面的图标
然后就是

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

iview

 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;
    },