全面兼容 requestFullscreen
对不支持requestFullscreen的设备用css模拟全屏容器
使用
<div id="full" style="width: 100%;">
<button id="toggle">{}</button>
</div>
import Full from 'vs-full';
const full = new Full({
el: document.querySelector('#full'),
toggle: document.querySelector('#toggle'),
forceRotate: false,
autoRotate: false,
disableScroll: true,
});
参数
- Selector 为 querySelector 选择器 如:‘#ID’ ‘.CLASS’
参数名 | 描述 | 可选值 | 默认值 |
---|
el | 全屏容器 | HTMLElement or Selector | null |
toggle | 切换按钮 | HTMLElement or Selector | null |
forceRotate | 强制旋转 | boolean | false |
autoRotate | 自动旋转 | boolean | false |
disableScroll | 禁止滑动 | boolean | false |
nativeFirst | 原生优先 | boolean | false |
事件
方法
方法名 | 描述 |
---|
toggle | 切换全屏 |
requestFullscreen | 进入全屏 |
exitFullScreen | 退出全屏 |
destroy | 销毁 |
注意
- 如果 body 元素为 position:absolute; 请设置根元素的宽高