vue组件 - 全屏插件

安装:

npm install --save screenfull

应用:

import screenfull from 'screenfull'
export default {
  name: 'test',
  data() {
    return {
      screenfullBut: false, // 全屏按钮
    }
  },
  methods: {
    // 全屏功能
    fullscreen() {
      if (!screenfull.isEnabled) {
        this.$notification.open({
          message: '温馨提示',
          description:
            '您的浏览器无法使用全屏功能,请更换谷歌浏览器或者请手动点击F11按钮全屏展示!',
          duration: 10,
          placement: 'bottomLeft',
        });
        return false
      }
      screenfull.toggle();
      if(screenfull.isFullscreen){
        this.screenfullBut = false;
      }else{
        this.screenfullBut = true;
      }
    },

  }
}

<div class="fullBut" @click="fullscreen">
    <svg-icon :iconClass="!screenfullBut?'map_full-screen':'map_small-screen'" className='ico'></svg-icon> &nbsp;{{!screenfullBut?'全屏':'取消'}}
</div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。