vue项目中实现的全屏功能

一. 引入全屏功能库

npm install screenfull -s

二. 使用方法

<template>
  <div class="home">
    <p class="chart-title" @click="toggleFullscreen">全屏</p>
  </div>
</template>

<script>
// @ is an alias to /src
import screenfull from 'screenfull'
export default {
  name: 'home',
  methods: {
  /*
  * 全屏按钮点击事件
  **/
    toggleFullscreen () {
      if (!screenfull.isEnabled) {
        return false
      }
      screenfull.request()
    },
  }
}
</script>