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}`
    })
<ElInput
          v-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、按钮样式
<ElButton
          style="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.scrollLeft
  nextTick(() => {
    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)
})