vue中使用screenfull插件实现指定元素全屏显示

一、使用screenfull插件

官方文档

1. npm安装screenfull插件

npm install screenfull --save

提示：在vue项目中导入screenfull插件，出现编译错误，错误如图所示：

原因分析： 安装的screenfull插件版本过高 解决方法： 降低插件版本

npm install screenfull@5 --save

2. 在vue文件中引入screenfull插件

import screenfull from 'screenfull'

3. vue文件demo实例

<template>
  <div>
    <div id="container_max" style="color:red">
      <div>我的div的内容，我要全屏展示</div>
      <div>
        <el-button type="primary" id="fullscreen_button" @click="isFullPage">进入全屏</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull"
export default {
  name: 'ScreenFull',
  methods: {
    isFullPage () {
      //console.log('触发了');
      const element = document.getElementById('container_max');
      if (screenfull.isEnabled) {
        screenfull.toggle(element);
      }
    }
  }
}
</script>