fix:chat对话更新
This commit is contained in:
parent
39b88135a1
commit
cbbf1ee84f
|
|
@ -5,10 +5,16 @@
|
||||||
<div class="sideContent">
|
<div class="sideContent">
|
||||||
<div plain="true" class="addBtn" @click="createNewChat">新建聊天</div>
|
<div plain="true" class="addBtn" @click="createNewChat">新建聊天</div>
|
||||||
<div class="chatList">
|
<div class="chatList">
|
||||||
<div class="listItem" v-for="item in listData" :key="item.id" @click="listItemClick(item.id)">
|
<div class="listItem" v-for="(item,$index) in listData" :key="item.id" @click="listItemClick(item.id)">
|
||||||
<div class="listItemTitle">{{ item.title }}</div>
|
<el-input v-if="item.isEdit" v-model="item.title" style="width: 160px;"></el-input>
|
||||||
<el-icon :size="20"><el-icon-edit/><Edit/></el-icon>
|
<div class="listItemTitle" v-else>{{ item.title }}</div>
|
||||||
<el-icon :size="20"><el-icon-delete/></el-icon>
|
<el-icon v-if="item.isEdit" class="listItemIcons" :size="15" @click="saveListItem(item.id,$index)"><el-icon-finished/></el-icon>
|
||||||
|
<el-icon v-else class="listItemIcons" :size="15" @click="editListItem(item.id,$index)"><el-icon-edit/></el-icon>
|
||||||
|
<el-popconfirm title="确定删除吗?" @confirm="deleteListItem(item.id,$index)">
|
||||||
|
<template #reference>
|
||||||
|
<el-icon v-if="!item.isEdit" :size="15" class="listItemIcons"><el-icon-delete/></el-icon>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -29,9 +35,9 @@
|
||||||
<el-footer class="footerWrap">
|
<el-footer class="footerWrap">
|
||||||
<div class="footerContent">
|
<div class="footerContent">
|
||||||
<div class="footerInput">
|
<div class="footerInput">
|
||||||
<el-input class="search_input" placeholder="来说点什么吧..."></el-input>
|
<el-input v-model="newQuestion" class="search_input" placeholder="来说点什么吧..."></el-input>
|
||||||
</div>
|
</div>
|
||||||
<el-button icon="el-icon-promotion" size="success"></el-button>
|
<el-button @click="sendQuestion" icon="el-icon-promotion" size="success"></el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-footer>
|
</el-footer>
|
||||||
</el-container>
|
</el-container>
|
||||||
|
|
@ -46,7 +52,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
userName: "",
|
userName: "",
|
||||||
listData:[{id:1,title:'前端有哪些性能优化?',}],
|
listData:[{id:1,title:'前端有哪些性能优化?',isEdit:false}],
|
||||||
originData:[
|
originData:[
|
||||||
{id:1,data:[
|
{id:1,data:[
|
||||||
{chat_text:'前端有哪些性能优化?',chat_time:'2022-08-18 10:00:00',chat_type:'myself'},
|
{chat_text:'前端有哪些性能优化?',chat_time:'2022-08-18 10:00:00',chat_type:'myself'},
|
||||||
|
|
@ -121,6 +127,25 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
deleteListItem(id,index){
|
||||||
|
|
||||||
|
},
|
||||||
|
editListItem(id,index){
|
||||||
|
this.listData[index].isEdit = true;
|
||||||
|
},
|
||||||
|
saveListItem(id,index){
|
||||||
|
// this.$API
|
||||||
|
this.listData[index].isEdit = false;
|
||||||
|
},
|
||||||
|
sendQuestion(){
|
||||||
|
let date = new Date();
|
||||||
|
let id = date.getTime();
|
||||||
|
this.chatData.push({chat_text:this.newQuestion,chat_time:date,chat_type:'myself'});
|
||||||
|
this.newQuestion = '';
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
//接口请求
|
||||||
|
})
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -200,6 +225,12 @@ export default {
|
||||||
border-color: rgb(75, 158, 95);
|
border-color: rgb(75, 158, 95);
|
||||||
background-color :rgb(245, 245, 245)
|
background-color :rgb(245, 245, 245)
|
||||||
}
|
}
|
||||||
|
.listItem>.listItemIcons{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.listItem.active>.listItemIcons{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
.listItemTitle{
|
.listItemTitle{
|
||||||
width: 160px;
|
width: 160px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue