如何实现全局展示的效果

Posted fengshaopu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现全局展示的效果相关的知识,希望对你有一定的参考价值。

第一步我们可以利用js来实现
直接上代码

<template>
  <div>
    <button @click="screen">全屏</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullscreen: false
    };
  },
  methods: {
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }
  }
};
</script>


第二种我们可以利用插件
1.使用的是sreenfull插件,执行命令安装

npm install --save screenfull

2.在使用的页面正确引入:

import screenfull from ‘screenfull’
<template>
 <div>
   <a-button type="primary" @click="screen">全屏</a-button>
 </div>
</template>

<script>
  import screenfull from 'screenfull'
  export default {
    name: "home",
    data() {
      return {
        //默认不全屏
        isFullscreen: false
      }
    },

    methods: {
      screen(){
        // 如果不允许进入全屏,发出不允许提示
        if (!screenfull.enabled) {
          this.$message('您的浏览器不能全屏');
          return false
        }
        screenfull.toggle();
        this.$message.success('全屏啦')
      }
    }
  }
</script>

<style scoped>

</style>

以上是关于如何实现全局展示的效果的主要内容,如果未能解决你的问题,请参考以下文章

利用mask-image蒙层编写异形头像

分享WeX5的正确打开方式——绑定机制

Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例

常用的几个JQuery代码片段

如何利用redis来进行分布式集群系统的限流设计

FineReport中如何实现自动滚屏效果