vue全屏插件screenfull的使用

1.安装组件

npm i screenfull@5.1.0

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

image.png

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

import screenfull from 'screenfull'

2.使用
首先找到全屏的图表

image.png

在这个使用的ali iconfon

    <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>