vue 视频全屏显示

安装插件

npm install screenfull  save

代码

<template>
    <el-tooltip content="全屏缩放" effect="dark" placement="bottom" fullscreen>
      <screenfull id="screenfull" class="el-icon-full-screen" @click="isScreenFull" />
    </el-tooltip>
</template>
<script>
// 添加引用
import screenfull from 'screenfull'
export default {
  data () {
    return {
      isFullscreen: false
    }
  },
  methods: {
    isScreenFull () {
      if (!screenfull.isEnabled) {
        this.$message({
          message: '您的浏览器版本过低不支持全屏显示！',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    }
  }
}
</script>