前言:
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、手动打开/关闭 el-popover
1、定义ref
const popoverRef= ref(); 2、在标签上加ref
<el-popover ref={popoverRef} ...3、调用隐藏方法
popoverRef.value?.hide()
popoverRef.value?.show()
3、el-scrollbar的使用,使用element提供的滚动插件,在大数据的情况下比@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.scrollTopconst domHeitht = scrollRef.value.wrap$.clientHeight;const allHeitht = scrollRef.value.wrap$.scrollHeight;const scrollBottom = allHeitht - scrollTop - domHeitht //距离底部距离if(scrollBottom <= 200){}},1000);