Api
useScriptTriggerElement
useScriptTriggerElement 函数的 API 文档。
创建一个触发器，以便在特定元素事件发生时加载脚本。
签名
function useScriptTriggerElement(options: ElementScriptTriggerOptions): Promise<void> & { ssrAttrs?: Record<string, string> } | 'onNuxtReady' {}
参数
export interface ElementScriptTriggerOptions {
/**
* The event to trigger the script load.
*
* For example we can bind events that we'd normally use addEventListener for: `mousedown`, `mouseenter`, `scroll`, etc.
*/
trigger?: 'immediate' | 'visible' | string | string[] | false | undefined
/**
* The element to watch for the trigger event.
* @default document.body
*/
el?: HTMLElement | Ref<HTMLElement | undefined> | null
}
返回
一个在脚本加载后解析的 Promise。
处理预水合事件
当注册一个依赖用户输入的触发器时，例如 mousedown，用户可能会在水合过程完成之前与该元素进行交互。
在这种情况下，事件监听器将不会附加到该元素，并且脚本将不会加载。
为了确保正确处理，您应该将 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">
Click me to load the script
</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>Scroll down to load the script</h1>
</div>
<div ref="el">
<h1>Script loaded!</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>hover me to load the script</h1>
</div>
</template>