A1300399510/PC-mj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化讨论框

Browse Source
This commit is contained in:
A1300399510
2024-01-31 15:29:31 +08:00
parent 39c14ed9bb
commit 2220b40f7f
46 changed files with 544 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
pages/details/[id].vue
View File

@@ -176,7 +176,7 @@
<!-- <textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop" @blur="postCommentFocusBlur" @focus="postCommentFocusState = true"></textarea> -->
<el-input class="post-input flex1" type="textarea" :autosize="postCommentFocusState" :maxlength="500" show-word-limit placeholder="说说你的想法或疑问…" v-model="commentInputTop" @blur="postCommentFocusBlur" @focus="postCommentFocusState = true"></el-input>
</div>
<div class="post-ok flexcenter" @click="submitAnswerComments()">发送</div>
<div class="post-ok flexcenter" @click="submitAnswerComments(commentInputTop)">发送</div>
</div>
<template v-if="isEmptyState">
@@ -225,12 +225,10 @@
</div>
</div>
<div class="comment-text" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" v-html="item['content']"></div>
<!-- <div class="comments-input-box flexacenter" v-if="item['childState']" :class="{ 'comments-input-box-show': item['childState'] }"> -->
<div class="comments-input-box flexacenter" :class="{ 'comments-input-box-show': item['childState'] }">
<div class="comments-input flexflex">
<!-- <textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea> -->
<div class="comments-input-masking" @click="closeAnswerCommentsChild()" v-if="item['childState']"></div>
<div class="comments-input-box" :class="{ 'comments-input-box-show': item['childState'] }">
<div class="comments-input">
<el-input type="textarea" v-model="commentInput" placeholder="回复" :maxlength="500" show-word-limit></el-input>
<!-- <div class="comments-btn flexcenter" @click="submitAnswerComments(index)">发送</div> -->
<div class="operate-bottom flexacenter">
<div class="comments-btn comments-btn-cancel flexcenter" @click="closeAnswerCommentsChild()">取消</div>
<div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index)">发送</div>
@@ -283,12 +281,21 @@
<div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div>
{{ ite["content"] }}
</div>
<div class="comments-input-box flexacenter" v-if="ite['childState']">
<!-- <div class="comments-input-box flexacenter" v-if="ite['childState']">
<div class="comments-input flexflex">
<textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
<div class="comments-btn flexcenter" @click="submitAnswerComments(index, i)">发送</div>
</div>
<!-- <img class="forkfork" @click="closeAnswerCommentsChild(index, i)" src="@/assets/img/cross-icon.png" /> -->
</div> -->
<div class="comments-input-masking" @click="closeAnswerCommentsChild()" v-if="ite['childState']"></div>
<div class="comments-input-box" :class="{ 'comments-input-box-show': ite['childState'] }">
<div class="comments-input">
<el-input type="textarea" v-model="commentInput" placeholder="回复" :maxlength="500" show-word-limit></el-input>
<div class="operate-bottom flexacenter">
<div class="comments-btn comments-btn-cancel flexcenter" @click="closeAnswerCommentsChild()">取消</div>
<div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index, i)">发送</div>
</div>
</div>
</div>
</div>
</div>
@@ -306,7 +313,7 @@
</div>
</div>
<div class="floor-area flexacenter">
<div class="floor-area flexacenter" @click="closeAnswerCommentsChild()">
<div class="floor-content flexacenter">
<div class="floor-right flexacenter" @mouseenter="handleFloorRight(true)" @mouseleave="handleFloorRight(false)">
手机查看该面经
@@ -818,7 +825,7 @@ const openAnswerCommentsChild = (index, i) => {
// 关闭 回答-评论 的子评论
const closeAnswerCommentsChild = () => {
commentInput.value = ""
// commentInput.value = ""
commentList.value.forEach(ele => {
ele["childState"] = false
if (ele["child"] && ele["child"].length != 0) ele["child"].forEach(el => (el["childState"] = false))
@@ -830,19 +837,20 @@ let commentInputTop = ref("")
let commentInput = ref("")
// 提交回答-评论
const submitAnswerComments = (index, i) => {
const submitAnswerComments = (content, index, i) => {
if (isNeedLogin.value) {
goLogin()
return
}
const targetCommentList = [...commentList.value]
let content = ""
// let content = ""
let parentid = null
if (index == null) content = commentInputTop.value
else content = commentInput.value
// if (index == null) content = commentInputTop.value
// else content = commentInput.value
console.log(targetCommentList, "index", index, "111")
if (i != null) parentid = targetCommentList[index]["child"][i]["id"]
else if (index != null) parentid = targetCommentList[index]["id"]
@@ -2036,20 +2044,29 @@ const postCommentFocusBlur = () => {
}
}
.comments-input-masking {
width: 100vw;
height: 100vh;
min-width: 1200px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.comments-input-box {
margin-top: 13px;
margin-bottom: 10px;
.comments-input {
// width: 519px;
flex: 1;
height: 60px;
border: 1px solid rgba(215, 215, 215, 1);
border-radius: 8px;
// margin-right: 16px;
position: relative;
z-index: 1;
// margin-bottom: 10px;
// height: 0;
// overflow: hidden;
transition: all 0.3s;
position: relative;
z-index: 11;
&.comments-input-box-show {
height: 184px;
// overflow: visible;
margin-bottom: 10px;
&::after {
content: "";
width: 20px;
@@ -2062,31 +2079,117 @@ const postCommentFocusBlur = () => {
transform: rotate(45deg);
z-index: -1;
}
.comments-input {
border: 1px solid rgba(215, 215, 215, 1);
background-color: #fff;
textarea {
/deep/ textarea {
height: 140px;
padding: 10px;
min-height: 40px !important;
overflow: auto;
}
/deep/ .el-input__count {
display: block;
}
.operate-bottom {
display: flex;
}
}
}
.comments-input {
// width: 519px;
flex: 1;
border-color: #fff;
// height: 60px;
// border: 1px solid rgba(215, 215, 215, 1);
// border-right: none;
border-radius: 8px;
// margin-right: 16px;
position: relative;
z-index: 1;
transition: all 0.3s;
// background-color: #fff;
// &::after {
// content: "";
// width: 20px;
// height: 20px;
// display: block;
// background-color: rgba(215, 215, 215, 1);
// position: absolute;
// top: -2px;
// left: 21px;
// transform: rotate(45deg);
// z-index: -1;
// }
/deep/ textarea {
border: none;
outline: none;
resize: none;
padding: 11px 16px;
border-radius: 7px 0 0 7px;
}
.comments-btn {
width: 58px;
height: 58px;
background-color: rgba(98, 177, 255, 1);
border-radius: 0 7px 7px 0;
padding: 10px;
// border-radius: 7px 0 0 7px;
border-radius: 8px;
font-size: 14px;
color: #ffffff;
cursor: pointer;
width: 100%;
// height: 140px;
height: 0;
padding: 0 10px;
min-height: 0 !important;
transition: all 0.2s;
overflow: hidden;
}
/deep/ .el-textarea__inner {
box-shadow: none;
}
/deep/ .el-input__count {
left: 10px;
bottom: -32px;
width: fit-content;
display: none;
}
/deep/ .el-textarea {
display: block;
}
.operate-bottom {
justify-content: flex-end;
display: none;
transition: all 0.3s;
.comments-btn {
width: 60px;
height: 32px;
border-radius: 6px;
background-color: rgba(98, 177, 255, 1);
// border-radius: 0 7px 7px 0;
font-size: 14px;
color: #ffffff;
cursor: pointer;
margin-right: 10px;
margin-bottom: 10px;
&.comments-btn-cancel {
border: 1px solid #cccccc;
color: #797979;
background-color: #fff;
}
}
}
}
.forkfork {
width: 12px;
height: 12px;
cursor: pointer;
}
// .forkfork {
// width: 12px;
// height: 12px;
// cursor: pointer;
// }
}
}
@@ -2139,7 +2242,7 @@ const postCommentFocusBlur = () => {
width: 100vw;
min-width: 1200px;
height: 70px;
z-index: 1;
z-index: 11;
background-color: rgba(255, 255, 255, 1);
-moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
-webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);