在 Nuxt.js 中使用来自 GSAP 的 Splittext

Question

我正在使用 nuxtjs 3 和 @hypernym/nuxt-gsap 包。我想使用 splittext 但出现以下错误。你能帮忙吗？

const { $gsap } = useNuxtApp();
onMounted(() => {
  var childSplit = this.SplitText(".text-animation", {type: "lines"});
  console.log(childSplit);
});

我的错误：

index.vue：144未捕获（承诺中）TypeError：无法读取未定义的属性（读取“SplitText”）

Answer 1

vue3 设置中没有 this，因为 Vue 实例尚未初始化

将您的代码更改为

const { $SplitText } = useNuxtApp()
onMounted(() => {
    const childSplit = $SplitText(".text-animation", {type: "lines"});
    console.log(childSplit);
});

示例来自 github