useScriptTriggerElement
useScriptTriggerElement 函数的 API 文档。
创建一个触发器，根据特定的元素事件来加载脚本。
签名
function useScriptTriggerElement(options: ElementScriptTriggerOptions): Promise<void> & { ssrAttrs?: Record<string, string> } | 'onNuxtReady' {}
参数
export interface ElementScriptTriggerOptions {
/**
* 触发脚本加载的事件。
*
* 例如我们可以绑定通常使用 addEventListener 的事件：`mousedown`、`mouseenter`、`scroll` 等。
*/
trigger?: 'immediate' | 'visible' | string | string[] | false | undefined
/**
* 监听触发事件的元素。
* @default document.body
*/
el?: HTMLElement | Ref<HTMLElement | undefined> | null
}
返回值
返回一个 Promise，当脚本加载完成时会被解析。
处理预水合事件
当注册依赖用户输入的触发器时（例如 mousedown），用户可能会在水合（hydration）过程完成之前与元素互动。
此时，事件监听器还未绑定到元素上，脚本也不会被加载。
为了确保正确处理，应该将 ssrAttrs 值绑定到你附加事件的元素上。注意，在使用 ssrAttrs 值之前，应确认函数返回的是 Promise。
<script setup lang="ts">
import { ref, useScriptTriggerElement } from '#imports'
const el = ref<HTMLElement>()
const trigger = useScriptTriggerElement({
trigger: 'mousedown',
el,
})
const elAttrs = computed(() => {
return {
...(trigger instanceof Promise ? trigger.ssrAttrs : {}),
}
})
</script>
<template>
<div ref="el" v-bind="elAttrs">
点击我以加载脚本
</div>
</template>
示例
- 当元素出现在视口时加载脚本。
<script setup lang="ts">
const el = ref<HTMLElement>()
useScript('/script.js', {
trigger: useScriptTriggerElement({
trigger: 'visible',
el,
})
})
</script>
<template>
<div style="height: 100vh;">
<h1>向下滚动以加载脚本</h1>
</div>
<div ref="el">
<h1>脚本已加载！</h1>
</div>
</template>
- 当元素被悬停时加载脚本。
<script setup lang="ts">
const el = ref<HTMLElement>()
useScript('/script.js', {
trigger: useScriptTriggerElement({
trigger: 'hover',
el,
})
})
</script>
<template>
<div ref="el">
<h1>鼠标悬停我以加载脚本</h1>
</div>
</template>