vue screenfull

// 使用 vue-screenfull 的示例代码

// 首先安装 vue-screenfull 库
// npm install vue-screenfull

<template>
  <div>
    <button @click="toggleFullScreen">切换全屏</button>
  </div>
</template>

<script>
import screenfull from 'screenfull';

export default {
  name: 'FullScreenComponent',
  methods: {
    toggleFullScreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      } else {
        console.log('浏览器不支持全屏');
      }
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

1. 安装依赖：首先需要通过 npm install vue-screenfull 安装 vue-screenfull 库。
2. 模板部分：在模板中，我们定义了一个按钮，点击按钮时会触发 toggleFullScreen 方法。
3. 脚本部分：
   • 引入 screenfull 模块。
   • 在 methods 中定义了 toggleFullScreen 方法，该方法会检查浏览器是否支持全屏功能 (screenfull.isEnabled)，如果支持则调用 screenfull.toggle() 切换全屏状态，否则输出提示信息。
4. 样式部分：可以根据实际需求添加样式。

希望这个示例能帮助你理解如何在 Vue 项目中使用 vue-screenfull 实现全屏功能。