From f60b31044a9a117244e7cd5d51f29b53d425a409 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Mon, 28 Feb 2022 18:34:47 +0800 Subject: [PATCH] wow.js 加入 --- src/components/mini/box12-comment.vue | 264 +++++++++++++++++++++++++++++++++------------------- 1 files changed, 168 insertions(+), 96 deletions(-) diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue index fc1468c..7fccf8d 100644 --- a/src/components/mini/box12-comment.vue +++ b/src/components/mini/box12-comment.vue @@ -1,116 +1,188 @@ <template> <div class="myFriend"> - <a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"> - <div style="display: flex;justify-content: center; "> - <a-form-model-item label="昵称"> - <a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="昵称"> - </a-input> - </a-form-model-item> - <a-form-model-item label="邮箱"> - <a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="邮箱"> - </a-input> - </a-form-model-item> - <a-form-model-item label="主页"> - <a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="主页"> - </a-input> - </a-form-model-item> - </div> - </a-form-model> + <replyBox ref="commentBoxId"></replyBox> + <a-modal v-model="visible" title="回复Ta @xx" on-ok="handleOk" + :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}"> + <!-- <template slot="footer"> + <a-button key="reset" @click="reset" type="danger"> + 擦掉重来 + </a-button> + <a-button key="back" @click="handleCancel"> + 歇会 + </a-button> + <a-button key="submit" type="primary" :loading="loading" @click="handleOk"> + 完事<span style="font-size: 10px;">儿</span>.. + </a-button> + </template> --> + <replyBox ref="replyBoxId"></replyBox> + </a-modal> + <div v-for="temp in commentListData" class="commentList"> - <a-comment> - <!-- <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" - alt="Han Solo" /> --> - <div slot="content"> - <a-form-item> - <a-textarea :rows="4" :value="value" @change="handleChange" /> - </a-form-item> - <a-form-item> - <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit"> - 高低整两句 - </a-button> - </a-form-item> - </div> - </a-comment> + <div class="commentGroup"> + <a-comment> + <span slot="actions" key="comment-nested-reply-to" @click="replyCall"> + <a-icon type="edit" />回复 + </span> - <a-comment> - <span slot="actions" key="comment-nested-reply-to">Reply to</span> - <a slot="author">Han Solo</a> - <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" - alt="Han Solo" /> - <p slot="content"> - We supply a series of design principles, practical patterns and high quality design resources - (Sketch and Axure). - </p> - <a-collapse v-model="activeKey"> - <a-collapse-panel key="1" header="展开"> - <a-comment> - <span slot="actions">Reply to</span> - <a slot="author">Han Solo</a> - <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" - alt="Han Solo" /> - <p slot="content"> - We supply a series of design principles, practical patterns and high quality design - resources (Sketch and Axure). - </p> - <a-comment> - <span slot="actions">Reply to</span> - <a slot="author">Han Solo</a> - <a-avatar slot="avatar" - src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo" /> - <p slot="content"> - We supply a series of design principles, practical patterns and high quality design - resources (Sketch and Axure). - </p> - </a-comment> - <a-comment> - <span slot="actions">Reply to</span> - <a slot="author">Han Solo</a> - <a-avatar slot="avatar" - src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo" /> - <p slot="content"> - We supply a series of design principles, practical patterns and high quality design - resources (Sketch and Axure). - </p> - </a-comment> + <div slot="avatar"> + {{temp.userName}} : + </div> + + <p slot="content">{{temp.userComment}}</p> + + <a-comment v-for="tempData in temp.replyList.listData"> + <span slot="actions" key="comment-nested-reply-to" @click="replyCall"> + <a-icon type="edit" />回复 + </span> + <div slot="avatar"> + {{tempData.userName}} @ {{tempData.replyUserName}} : + </div> + <p slot="content">{{tempData.userComment}}</p> </a-comment> - </a-collapse-panel> - </a-collapse> - </a-comment> - <a-comment> - <span slot="actions">Reply to</span> - <a slot="author">Han Solo</a> - <a-avatar slot="avatar" - src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo" /> - <p slot="content"> - We supply a series of design principles, practical patterns and high quality design - resources (Sketch and Axure). - </p> - </a-comment> - </a-comment> + + + <div class="loadMore" @click="loadMore()"> + <a-icon type="down" /><span>更多...</span> + </div> + </a-comment> + </div> + </div> </div> </template> <script> + import replyBox from "./box13-reply.vue" export default { + components: { + replyBox + }, + methods: { + handleOk(e) {}, + loadMore() { + this.commentListData[0].replyList.listData = this.commentListData[0].replyList.listData.concat(this + .commentListData[0].replyList.listData) + }, + replyCall() { + this.visible = true; + var msgInfo = { + useName: "22", + userComment: "11", + }; + this.$nextTick(() => { + + this.$refs.replyBoxId.getMsgInfo(msgInfo); + }); + } + }, data() { return { - labelCol: { - span: 5, - offset: 0, - }, - wrapperCol: { - span: 15, - offset: 0 - }, - form: { - secret: "" - } + visible: false, + commentListData: [{ + userName: "bimo", + userComment: "1+1=2?", + commentTime: "2022-02-22 22:22:22", + id: "1", + parentId: null, + replyId: null, + replyUserName: null, + replyList: { + total: "3", + current: "1", + listData: [{ + userName: "inleft", + userComment: "2", + commentTime: "2022-02-22 23:22:22", + id: "2", + parentId: "1", + replyId: "1", + replyUserName: "bimo", + }, { + userName: "air", + userComment: "不对是3", + commentTime: "2022-02-23 13:13:13", + id: "3", + parentId: "1", + replyId: "2", + replyUserName: "inleft", + }] + }, + }, { + userName: "bimo", + userComment: "1+1=2?", + commentTime: "2022-02-22 22:22:22", + id: "1", + parentId: null, + replyId: null, + replyUserName: null, + replyList: { + total: "3", + current: "1", + listData: [{ + userName: "inleft", + userComment: "2", + commentTime: "2022-02-22 23:22:22", + id: "2", + parentId: "1", + replyId: "1", + replyUserName: "bimo", + }, { + userName: "air", + userComment: "不对是3", + commentTime: "2022-02-23 13:13:13", + id: "3", + parentId: "1", + replyId: "2", + replyUserName: "inleft", + }] + }, + }], + } } } </script> -<style> +<style lang="less"> + .visitInfo { + user-select: none; + } + + .commentList { + + img { + user-select: none; + } + + .ant-comment-actions { + display: flex; + justify-content: flex-end; + } + + .ant-comment-content-author { + margin-bottom: 0px; + } + + .ant-comment-inner { + padding: 10px 10px 0px; + } + + .commentGroup { + border-top: 1px solid #e5e9ef; + margin-bottom: 10px; + padding-bottom: 15px; + + + .loadMore:hover { + color: skyblue; + } + } + + .ant-comment-content-detail { + p { + margin-bottom: 0px; + } + } + } </style> -- Gitblit v1.9.1