基于 InterfaceObserver API，监听元素是否可见，当元素出现在视窗内的时候执行回调函数。
pnpm add @exposure-lib/core
由于 InterfaceObserver API 的兼容性在一些低版本浏览器上支持的还是不怎么好，可以事先引入polyfill至于@exposure-lib/core正常使用。
pnpm add @exposure-lib/polyfill
引入包
import '@exposure-lib/polyfill'
import * as Exposure from '@exposure-lib/core'注意：polyfill包一定要在core包之前引入
使用exposure来监听元素是否出现在可视区内非常简单，只需要两步即可。
- 首先需要创建一个
Exposure用来监听元素，它通过createExposure方法创建。
import { createExposure } from '@exposure-lib/core'
const exposure = createExposure()- 然后调用
Exposure的observe方法监听元素
const el = document.getElementById('el')
exposure.observe(el, () => {
console.log('exposure')
})exposure.observe方法至少接受两个参数，第一个参数为Element类型的元素，第二个参数为Handler，当监测元素出现在可视区内执行Handler，第三个参数为监听阈值(可选)。
默认情况下，曝光回调的执行是等待整个绑定元素全部包裹后才会执行。如果您有需求当元素出现一定比例是曝光， 可以设置 threshold，使用下面两种方式。
每次调用createExposure方法创建Exposure支持传入threshold用于当前Exposure作用域下的元素使用。
const exposure = createExposure(0.2)如上面代码所示，当元素的曝光比例达到 0.2 的时候，就会执行回调函数。
如果你想要某个元素的曝光比例与其他元素的不同，可单独为元素设置 threshold，
const el = document.getElementById('el')
const exposure = createExposure(0.2)
exposure.observe(el, () => {
console.log('exposure')
}, 0.8)需要注意：Element threshold > Exposure threshold
Handler 也就是指令的值，有两种类型：函数或对象
函数
函数类型是比较普遍的写法, 函数Handler只会在元素进入曝光且符合threshold情况下触发一次。
对象
对象类型的Handler需要有enter和leave属性其一，且enter和leave属性的值为函数类型。
- enter: enter Handler 会在元素进入曝光且符合
threshold情况下触发一次； - leave: leave Handler 会在 enter Handler 触发后，元素彻底离开可视区域后触发一次；
曝光回调的执行是单例的，也就是说当曝光过一次并且回调执行后，再次曝光就不会再执行回调函数。如果需要再次曝光则需要调用resetExposure来重置。
import { resetExposure } from '@exposure-lib/core'
// 重置所有元素
resetExposure()
// 重置el元素
const el = document.getElementById('el')
resetExposure(el)当页面销毁需要将当前页面内监听元素取消，调用exposure.unobserve方法取消监听元素
const el = document.getElementById('el')
const exposure = createExposure(0.2)
exposure.observe(el, () => {
console.log('exposure')
}, 0.8)
// 页面销毁
destory(() => {
exposure.unobserve(el)
})vue-exposure 监听元素是严格模式的，当一个元素的visibility为hidden或者width为0或者height为0都不会去监听。