vue3+tsx+element-plus で発生したいくつかの問題の概要

序文：

        vue3+tsx+element-plus で発生したいくつかの問題の概要

1. el-tooltip を手動で開閉する

1、定义ref
const tooltipMoreRef = ref(); 

2、在标签上加ref
<el-tooltip ref={tooltipMoreRef} content={t("chat.messageBox.more")} placement="top" effect="customized">...

3、调用隐藏方法
tooltipMoreRef.value?.hide()

2.エルポップオーバーを手動で開閉する

1、定义ref
const popoverRef= ref(); 

2、在标签上加ref
<el-popover ref={popoverRef} ...

3、调用隐藏方法
popoverRef.value?.hide()
popoverRef.value?.show()

3. el-scrollbarを使用する エレメントが提供するスクロールプラグインを使用する ビッグデータの場合は@scrollメソッドよりもはるかにスムーズなのでおすすめです！！！

1、标签

<el-scrollbar ref={scrollRef} class={["groupMembers__body"]} onScroll={(e:Event)=>handleScroll(e)}>
  {memberList.value.map((member: IGroupMember) => (
  	<div>{member.member_alias}</div>
  ))}
</el-scrollbar>

2、定义ref方法
const scrollRef = ref();

3、debounce是使用的防抖方法
const handleScroll = debounce(e => {
      const scrollTop = e.scrollTop
      const domHeitht = scrollRef.value.wrap$.clientHeight;
      const allHeitht = scrollRef.value.wrap$.scrollHeight;
      const scrollBottom =  allHeitht - scrollTop - domHeitht //距离底部距离
      if(scrollBottom <= 200){
        
      }
    },1000);