凡小多 2023-01-10 10:45 采纳率: 50%
浏览 39
已结题

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

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%
我想要达到的结果,如果你需要快速回答,请尝试 “付费悬赏”
  • 写回答

2条回答 默认 最新

  • 皮皮平 2023-01-10 13:46
    关注

    你好,因为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
      })
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 1月18日
  • 已采纳回答 1月10日
  • 创建了问题 1月10日