feat：add useFullScreen

[yerlink]

issue#8：useFullscreen 一个用于处理 dom 全屏的 Hook

[sendya]

能否增加全屏的状态事件回调（可选的），例如（伪代码）：

interface Options {
  onExitFull?: () => void;
  onFull?: () => void;
}

const [elRef, { setFull, exitFull, toggleFull }] = useFullscreen({
  onExitFull: () => {
    console.log('退出了全屏');
  },
  onFull: () => {
    console.log('进入了全屏');
  }
});

// template
<div ref="elRef">content</div>
<button @click="toggleFull ">全屏/退出全屏</button>

[yerlink]

已增加全屏的状态回调（可选的），代码已提交

------------------ 原始邮件 ------------------ 发件人: "vueComponent/use" <[email protected]>; 发送时间: 2020年12月4日(星期五) 下午3:34 收件人: "vueComponent/use"<[email protected]>; 抄送: "陈庆耀"<[email protected]>;"Author"<[email protected]>; 主题: Re: [vueComponent/use] feat：add useFullScreen (#28)

能否增加全屏的状态回调（可选的），例如（伪代码）： interface Options { onExitFull?: () => void; onFull?: () => void; } const [elRef, { setFull, exitFull, toggleFull }] = useFullscreen({ onExitFull: () => { console.log('退出了全屏'); }, onFull: () => { console.log('进入了全屏'); } }); // template <div ref="elRef">content</div> <button @click="toggleFull ">全屏/退出全屏</button>

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[noachan]

可能我描述上由于不清楚，导致有点误解，出现了一些偏差

因为 全屏 取消全屏 都是调用浏览器 API ，有时候可能会有等待或者任何可能的事件卡住 JS 请求全屏功能， （你可以当作 全屏 这个过程不一定是立即执行成功的 *（浏览器申请全屏时，首次执行可能会询问用户 是否允许全屏））

有时候我们有这样的需求，在请求全屏，或者退出全屏时，做一些事情。比如弹个框，或者改变一下布局。

例如：

• 需求1： 全屏后，需要对当前布局的 Table 分页器固定显示到 "屏幕底部"，这时候，我们一般可以通过监听你提供的 isFullscreen 响应式对象，来得知状态，并且控制分页器样式，但亦可通过一个全屏成功回调，在回调中处理逻辑，然后把分页器渲染到屏幕底部。
• 需求2： 退出全屏后，希望通知用户看一下 用户的消息中心提醒，也可以在退出回调中进行调用通知。

我的期望：

• 在 useFullscreen 函数中，对 setFull, exitFull 都在函数执行完毕时，增加一个事件回调，比如用户有传递 onFull 事件，则内部执行用户的 onFull() 函数，来达到用户的事件监听

备注：也可以一起讨论更加好用的用法