指南
触发脚本加载
Nuxt 脚本提供了多种方法来触发脚本加载。
Nuxt 脚本提供了多种方法来触发脚本加载。
import { useTimeout } from '@vueuse/core'
const { ready } = useTimeout(3000)
useScript({
src: 'https://example.com/script.js',
}, {
// load however you like!
trigger: ready, // refs supported
})
默认行为
默认情况下，脚本在 Nuxt 完全水合后加载。您可以通过修改 defaultScriptOptions 来更改此默认值。
元素事件触发器
The useScriptTriggerElement 可组合函数允许您挂钩到元素事件，作为加载脚本的一种方式。这对于在用户与特定元素交互时加载脚本很有用。
const somethingEl = ref<HTMLElement>()
const { trigger } = useScript({
src: 'https://example.com/script.js',
}, {
trigger: useScriptTriggerElement({
trigger: 'hover',
somethingEl,
})
})
它支持以下触发器
visible- 当元素在视窗中可见时触发。mouseover- 当鼠标悬停在元素上时触发。
手动触发
The manual 触发器允许您手动触发脚本加载。这使您可以完全控制何时加载脚本。
const { load } = useScript('https://example.com/script.js', {
trigger: 'manual'
})
// ...
load()
Promise
您可以使用 Promise 来触发脚本加载。这对于您可能想要使用的任何其他自定义触发器很有用。
const myScript = useScript('/script.js', {
// load after 3 seconds
trigger: new Promise(resolve => setTimeout(resolve, 3000))
})
Ref
您可以使用 ref 来触发脚本加载。这对于您可能想要使用的任何其他自定义触发器很有用。
const myRef = ref(false)
const myScript = useScript('/script.js', {
trigger: myRef
})
// ...
myRef.value = true