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

  }
}
 {{!screenfullBut?'全屏':'取消'}}

你可能感兴趣的:(vue.js,全屏显示)