//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)
})