Vue使用screenfull全屏插件

大祥子
2022-05-12 / 0 评论 / 500 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年07月08日,已超过630天没有更新,若内容或图片失效,请留言反馈。

1、下载screenfull插件npm install screenfull@5 --save,注意Vue3中使用需要下载低版本的,否则会报错误

1657246143963-f4af6c14-6f9a-4c66-870c-835dbb636c72.png

2、引入,安装教程引入会发现,node_modules/screenfull下找不到index.js文件会报错如上,具体使用如下

<button class="login-submit" type="primary" @click="test">测试全屏</button>

import ScreenFull from 'screenfull/dist/screenfull'

test() {
  if (!ScreenFull.isEnabled) {
    alert('不支持全屏')
    return false;
  }
  ScreenFull.toggle();
}

3、webApi提供的全屏API详见(MDN全屏API

0

评论 (0)

取消