关于#vue.js#的问题：Transition的钩子函数el类型报错：类型“Element”上不存在属性“dataset”(语言-typescript)

Question

Transition的钩子函数el类型报错：类型“Element”上不存在属性“dataset”。

遇到的现象和发生背景，请写出第一个错误信息

<transition-group tag="ul" :css="false" @beforeEnter="onBeforeEnter" @enter="onEnter" @leave="onLeave">
    <li class="mtb20" :key="item.name" v-for="(item, index) in currentList" :data-index="index">{{ item.name }}
</transition-group>

<script setup lang="ts">
...
const onEnter = (el: Element, done: gsap.Callback) => {
  const index = Number(el.dataset.index)
  gsap.to(el, {
    opacity: 1,
    height: 'auto',
    delay: index * 0.15,
    onComplete: done
  })
}

const onLeave = (el: Element, done: gsap.Callback) => {
  const newEl =  el as HTMLElement
  const index = Number(newEl.dataset.index)
  gsap.to(el, {
    opacity: 0,
    height: 0,
    delay: index * 0.15,
    onComplete: done
  })
}

</script>

运行结果及详细报错内容

我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%

我想要达到的结果，如果你需要快速回答，请尝试 “付费悬赏”

Answer 1

你好，因为Element类型定义里面没有dataset属性，如果你想使用这个属性，就应该给具体的元素类型名，比如我看到你的tag="ul"，那么对应就使用这个类型 HTMLUListElement

const onEnter = (el: HTMLUListElement, done: gsap.Callback) => {
  const index = Number(el.dataset.index)
  gsap.to(el, {
    opacity: 1,
    height: 'auto',
    delay: index * 0.15,
    onComplete: done
  })
}