Vue 全屏插件 screenfull的使用

1.安装组件

npm i screenfull@5.1.0

注意: 如果你使用的是vue2,则使用5.1.0，因为默认安装 版本是 6.0，在vue2环境下会报错

2.在需要引入的组件中引入

import screenfull from screenfull

2.使用 首先找到全屏的图表 在这个使用的ali iconfont

<div class="screenfull_icon fr" @click="screenfull">
      <i :class="iconclass"  style="font-size:40px"></i>
    </div>

js代码如下

<script>
import screenfull from screenfull
export default {
  name: "header",
  data() {
    return {
        iconclass: [],
        fullscreen:[icon,iconfont,icon-fullscreen],
        exitFullscreen:[icon,iconfont,icon-fullscreen-exit]
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (screenfull.isEnabled) {
        this.iconclass = this.fullscreen;
        screenfull.on(change, this.change)
      }
    },

    change() {
      if(screenfull.isFullscreen){
        this.iconclass = this.exitFullscreen;
      }else{
        this.iconclass = this.fullscreen;
      }
    },
    screenfull(){
    if (!screenfull.isEnabled) {
        this.$message({ message: 你的浏览器不支持全屏, type: warning })
        return false
      }
      screenfull.toggle();
    },
};
</script>