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>