vue3踩坑问题记录

//vue3+element-plus
//1、placeholder换行显示
const startTxt = ref('')
const contentText = ref<any>('')
startTxt.value = "请描述问题内容、例如："
historyData.prompt.forEach((el:any)=>{contentText.value += `\n${el.question}`})
<ElInputv-model="question"@keyup.enter="handleSend"@keydown.native.enter.prevent="handleEnter"type="textarea":placeholder="startTxt+contentText":autosize="{ minRows: 6, maxRows: 6 }"resize="none"class="input-with-line-break"/>2、禁用回车事件的默认行为
@keydown.native.enter.prevent="handleEnter"const handleEnter = function(event:any){event.preventDefault();
}
3、按钮样式
<ElButtonstyle="position: absolute; right: 10px; bottom: 10px"type="primary"round:icon="Promotion"plain@click="handleSend"/>
4、聊天功能，一直让新内容处在最下面
给聊天区域绑定ref;
nextTick(()=>{scrollTop.value.scrollTop = scrollTop.value.scrollHeight})5、两个不相关的表格同时联动横向滚动// 表格滚动，两个表格都绑定ref
//滚动公共方法
const scrollFun = function (data: any, el: any) {const scrollLeft = data.target.scrollLeftnextTick(() => {el?.setScrollLeft(Number(scrollLeft))})
}
//第一个表格
const handleScroll = function (event: any) {scrollFun(event, bottomTableRef.value)
}
//第二个表格
const handleScrollBottom = function (event: any) {scrollFun(event, topTableRef.value)
}
// 待优化，尽量别绑定在window上
window?.addEventListener('scroll', handleScroll, true)
window?.addEventListener('scroll', handleScrollBottom, true)//离开做销毁，不然会引起内存泄漏
onUnmounted(() => {storageValue.value = ''window.removeEventListener('scroll', handleScroll)window.removeEventListener('scroll', handleScrollBottom)
})