用asp.net做网站的书,游戏网站建设论文,帝国企业网站源码,推广软件一键发送有需要的小伙伴直接拿代码即可#xff0c;不需要下载依赖#xff0c;目前是初始版本#xff0c;后期会进行代码的优化。
评论组件如下#xff1a;
创建 comment.vue 文件。
表情组件 VueEmoji.vue 在评论组件中使用。
templatediv classcomment不需要下载依赖目前是初始版本后期会进行代码的优化。
评论组件如下
创建 comment.vue 文件。
表情组件 VueEmoji.vue 在评论组件中使用。
templatediv classcommentdiv classflex_boxh2评论 {{total}}/h2p文明上网理性发言/p/divdiv classcomment-headerdiv classheader_childreni classel-icon-user-solid img_width/iel-input:placeholderplaceholderTextv-modelcontextclassinputtypetextarearesizenonesizeminiclearable:maxlengthcontentLengthfocusisShowSecReply(undefined)/el-input/divdiv classheader_btn!-- 表情 --vue-emoji chooseEmojichooseEmoji/vue-emojiel-buttontypeprimarystyleheight: 40pxclickaddComment()审核{{ buttonText }}/el-button/div/divdiv v-loadingbigLoadingdiv classcomment-body v-for(item, index) in comments :keyitem.id index!-- 一级评论 --div classfirst-commenti classel-icon-user-solid img_width/idiv classcontent!-- 一级评论用户昵称 --div styledisplay: flex;align-items: center;h3{{ item.memberName }}/h3span v-ifitem.auditStatus 0 stylecolor: #ddab16;margin-left: 10px(待审核)/span/div!-- 一级评论发布时间 --span{{ item.createTime }}/span!-- 一级评论评论内容 --p{{ item.commentContent }}/p!-- 一级评论评论点赞 --div classcomment-righticlassel-icon-chat-dot-roundclickisShowSecReply(item)回复/iiv-ifuserInfor.memberName item.memberNameclassel-icon-deleteclickdeleteComment(item, undefined)删除/i/div!-- 回复一级评论 --div classreply-comment v-showisShowSec item.idel-input:placeholderplaceholderTextclassinputv-model.trimreplyContext:maxlengthcontentLengthclearable/el-inputdiv classflex_one_box!-- 表情 --vue-emoji chooseEmojichooseEmoji :layercomments/vue-emojiel-buttontypeprimarysizeminiclassreply-buttonclickaddComment(item)回复/el-button/div/div!-- 次级查看更多 --div classli_top v-ifitem.commentReplyInfoList?.length 0 clickhanlePublicTotal(item)span stylecolor: rgb(21 66 231);共{{item.commentReplyCount}}条评论/spani classel-icon-caret-bottom v-showitem.publicTotal/ii classel-icon-caret-top v-show!item.publicTotal/i/div!-- 次级评论 --ul v-infinite-scrollload(item.commentReplyInfoList) infinite-scroll-delay200 styleoverflow:auto classinfinite_list v-ifitem.publicTotal li v-for(reply, index) in item.commentReplyInfoList :keyreply.id index!-- 次级评论头像,该用户没有头像则显示默认头像 --templatediv classsecond-commenti classel-icon-user-solid img_width/idiv classcontent!-- 次级评论用户昵称 --div styledisplay: flex;align-items: center;h3{{ reply.memberName }}/h3span v-ifreply.auditStatus 0 stylecolor: #ddab16;margin-left: 10px(待审核)/span/div!-- 次级评论评论时间 --span{{ reply.createTime }}/spanspan classto_reply{{ reply.memberName }}/span回复span classto_reply{{ reply.replyMemberName }}/span:p{{ reply.commentContent }}/p!-- 次级评论评论点赞 --div classcomment-righticlassel-icon-chat-dot-roundclickisShowSecReply(reply)回复/iiv-ifuserInfor.memberName reply.memberNameclassel-icon-deleteclickdeleteComment(item, reply)删除/i/divdiv classreply-comment v-showisShowSec reply.idel-input:placeholderplaceholderTextclassinputv-model.trimreplyContext:maxlengthcontentLengthclearable/el-inputdiv classflex_one_box!-- 表情 --vue-emoji chooseEmojichooseEmoji :layeritem.commentReplyInfoList/vue-emojiel-buttontypeprimarysizeminiclassreply-buttonclickaddComment(item,reply)回复/el-button/div/div/div/div/template/liel-button classloading_p typeprimary sizemini v-ifitem.moreValue :loadingchildrenMorelist.loading clickchangeChildrenMore(item)加载更多/el-button/ul/div/div/div/div!-- 一级查看更多 --el-button typeinfo classmoreBtn :loadingmorelist.loading clickchangeMore v-ifmorelist.value查看更多评论i classel-icon-caret-bottom/i /el-button!-- div v-else classmore_div暂无更多评论/div --!-- 暂无评论的空状态 --el-empty :descriptionemptyText v-ifcomments.length 0/el-empty/div
/template
script
export default {props: {sourceType: {type: String,require: true},articleId: {//评论所属文章 idtype: String},emptyText: {// 评论为空的时候显示的文字type: String,default: 期待你的评论},buttonText: {// 按钮文字type: String,default: 评论},contentLength: {// 评论长度type: Number,default: 150},placeholderText: {// 默认显示文字type: String,default: 请输入最多150字的评论...}},data() {return {bigLoading: false,userInfor: {},params: {pageNum: 1,pageSize: 5,orderByColumn: createTime,isAsc: asc,sourceType: this.sourceType,mainId: ,},pantPageNum: 1, // 父级查看更多total: 0,comments: [], // 获取得到的评论context: , // 评论内容replyContext: , //一级评论回复isShowSec: , //是否显示次级回复框isClickId: , //记录点击回复的评论iduserId: 1, // 浏览器指纹username: 孤城浪人, //你的用户名firstIdx: 1,secIdx: 1,avatarUrl:https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png,morelist: {index: 2,value: false,loading: false,},childrenMorelist: {index: 2,childrenId: ,childrenPageNum: 1, // 子级查看更多childrenTotal: 0,value: false,loading: false,},};},mounted() {this.userInfor localStorage.getItem(userInfor) ? JSON.parse(localStorage.getItem(userInfor)) : {};// 获取评论数据this.getCommentList();},computed: {isLogin() {return this.$store.getters.isLogin;},},methods: {chooseEmoji(layer,val) {if(layer) {this.replyContext val;return;}this.context val;},// 查看更多评论async changeMore() {this.morelist.loading true;this.pantPageNum;this.params.pageNum this.pantPageNum;console.log(this.params.pageNum,this.params.pageNum);let res await this.getNewList();res.rows.map(item {this.$set(item,publicTotal,false)})this.comments.push(...res.rows);this.morelist.loading false;this.total res.total;if(res.total this.params.pageNum * this.params.pageSize) {this.morelist.value true;}else {this.morelist.value false;}},// 加载更多async changeChildrenMore(item) {if(this.childrenMorelist.childrenId this.childrenMorelist.childrenId ! item.id) {this.childrenMorelist.childrenPageNum 1;}this.childrenMorelist.childrenId item.id;this.childrenMorelist.loading true;this.childrenMorelist.childrenPageNum;this.params.pageNum this.childrenMorelist.childrenPageNum;this.params.mainId item.id;let res await this.getNewList();this.childrenMorelist.childrenTotal res.total;console.log(res,res);item.commentReplyInfoList.push(...res.rows);this.childrenMorelist.loading false;if(res.total this.params.pageNum * this.params.pageSize) {item.moreValue true;}else {item.moreValue false;}},load(list) {list 2},// 唤起文件选择handleClick() {this.$refs.avatar.click();},// 获取本篇文章所有评论async getCommentList() {try {this.comments [];this.bigLoading true;// 获取某篇文章下的所有评论const res await this.$get(/api/comment/list?pageNum${this.params.pageNum}pageSize${this.params.pageSize}orderByColumn${this.params.orderByColumn} desc,auditStatusisAsc${this.params.isAsc}sourceType${this.params.sourceType}mainId${this.params.mainId}sourceId${this.$route.query.id})this.bigLoading false;this.comments res.rows; //评论列表this.total res.total; //评论总数if(this.total this.params.pageSize) {this.morelist.value true;}else {this.morelist.value false;}this.comments.map(item {if(item.commentReplyCount 5) {item.moreValue true;}else {item.moreValue false;}this.$set(item,publicTotal,false)}) } catch (err) {this.bigLoading false;this.$message.error(err);}},async getNewList() {let res await this.$get(/api/comment/list?pageNum${this.params.pageNum}pageSize${this.params.pageSize}orderByColumn${this.params.orderByColumn} desc,auditStatusisAsc${this.params.isAsc}sourceType${this.params.sourceType}mainId${this.params.mainId}sourceId${this.$route.query.id});console.log(res1111,res);return res;},// 控制二级条数显示盒子hanlePublicTotal(item) {item.publicTotal !item.publicTotal;console.log(item,item);},isShowSecReply(item) {console.log(一级input获取焦点,item);let id item?.id;if (id) {this.isShowSec id;if (this.isClickId this.isShowSec) {this.isShowSec ;} else {this.isShowSec id;}this.isClickId this.isShowSec;} else {this.isShowSec this.isClickId ;}},// 删除deleteComment(item, reply) {if(!this.isLogin) {this.$message.warning(请先登录);return;}let _id item.id;let replyId reply?.id;if (replyId) {// 删除二级评论提交请求到后端this.$confirm(确认删除此评论?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.$put(/api/comment/${replyId}).then(async (res) {if (res.code 200) {this.params.pageNum 1;let data await this.getNewList();console.log(data,data);item.commentReplyCount data.total;item.commentReplyInfoList.splice(0);item.commentReplyInfoList.push(...data.rows);//this.$message({message: 删除成功,type: success,});}});}).catch(() {this.$message({type: info,message: 已取消删除});})} else {// 删除一级评论提交请求到后端this.$confirm(确认删除此评论?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.$put(/api/comment/${_id}).then((res) {if (res.code 200) {this.$message({message: 删除成功,type: success,});this.params.pageNum 1;this.getCommentList();}});this.total--;if(this.total this.params.pageSize) {this.morelist.value false;}}).catch(() {this.$message({type: info,message: 已取消删除});})}},// 评论添加成功返回的数据async addComment(item,reply) {console.log(item,item );if(!this.isLogin) {this.$message.warning(请先登录);return;}//本地更新评论列表if (item) {// 添加二级评论if (!this.replyContext) {this.$message.warning(评论或留言不能为空哦);return;}this.addSecond(item,reply);} else {// 添加一级评论提交数据到后端if (!this.context) {this.$message.warning(评论或留言不能为空哦);return;}this.addFirst();}this.isShowSec this.isClickId ;},addSecond(item,reply) {// 模拟数据提交成功后返回数据let data {mainId: item.id,parentId: item.id,sourceType: item.sourceType,sourceId: this.$route.query.id, commentContent: this.replyContext //评论内容};if(reply) {data.parentId reply.id;}this.$post(/api/comment,data).then(async(res) {if(res.code 200) {this.params.mainId item.id;let res await this.getNewList();if(!item.commentReplyInfoList) {item.commentReplyInfoList [];}item.commentReplyInfoList.splice(0);item.commentReplyInfoList.push(...res.rows);item.commentReplyCount res.total;if(res.total 5) {item.moreValue true;}this.replyContext ;console.log(comments,this.comments);}})},addFirst() {// 模拟数据提交成功后返回数据let data {mainId: ,parentId: ,sourceType: this.sourceType,sourceId: this.$route.query.id, commentContent: this.context //评论内容};this.$post(/api/comment,data).then(async(res) {if(res.code 200) {this.params.mainId ;let res await this.getNewList();res.rows.map(item {this.$set(item,publicTotal,false)})this.comments res.rows;this.context ;this.total res.total;if(res.total 5) {this.morelist.value true;}}})},}
};
/script
style langscss scoped
.comment {min-height: 26vh;border-radius: 5px;margin-top: 2px;overflow: hidden;h3 {margin: 5px 0;}p {margin: 3px 0;}ul {list-style-type: none;}.img_width {max-width: 50px;max-height: 50px;border-radius: 50px;font-size: 30px;color: #3339;}.flex_box {padding: 0 5px;display: flex;align-items: center;margin-bottom: 30px;h2 {margin: 0;}p {font-size: 16px;color: #666;margin: 0 0 0 20px;}}.active {color: rgb(202, 4, 4);}.comment-header {position: relative;// height: 50px;padding: 10px 5px;// display: flex;// align-items: center;.header_children {display: flex;align-items: center;}.header_btn {display: flex;align-items: center;justify-content: space-between;padding: 0 20px 0 60px;margin-top: 10px;}.input {margin-left: 10px;margin-right: 20px;flex: 1;font-size: 14px;::v-deep .el-input__inner:focus {border-color: #dcdfe6;}}}.comment-body {font-size: 14px;.first-comment {display: flex;padding: 10px 20px;.input {::v-deep.el-input__inner:focus {border-color: #dcdfe6;}}i {margin-right: 5px;margin-left: 1vw;cursor: pointer;// :nth-child(3) {// color: rgb(202, 4, 4);// }}.content {margin-left: 10px;position: relative;flex: 1; span {font-size: 12px;color: rgb(130, 129, 129);}.comment-right {position: absolute;right: 0;top: 0;}.reply-comment {// height: 60px;// display: flex;// align-items: center;.flex_one_box {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;}.reply-button {margin-left: 20px;height: 35px;}}.li_top {width: 200px;cursor: pointer;padding-left: 50px;}.infinite_list {max-height: 333px;}.second-comment {display: flex;padding: 10px 0 10px 5px;border-radius: 20px;background: #ffffff;.to_reply {// color: rgb(126, 127, 128);color: #0d74e1;}}.loading_p {cursor: pointer;margin: 3px auto;display: flex;justify-content: center;}}}}.moreBtn {width: 100%;i {font-size: 16px;}}.more_div {display: flex;display: flex;justify-content: center;color: #66666694;font-size: 14px;}::-webkit-scrollbar{width: 8px;height: 5px;background-color: #F5F5F5;}/*定义滚动条轨道 内阴影圆角*/::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px #c0c0c0;border-radius: 10px;background-color: #f9f9f9;}/*定义滑块 内阴影圆角*/::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px #c0c0c0;background-color: #c0c0c0;}
}
/style
表情组件如下
1. 创建 VueEmoji.vue 文件。
templatediv classemojiul classemoji-default v-showisShowEmojili v-for(item, index) in emojiJson :keyindexclick.stopchooseEmojiDefault(item){{item}}/li/uldiv classemoji-tabsdiv :class!isShowEmoji ? emoji-tab : new_tab clickisShowEmoji !isShowEmoji{{ isShowEmoji ? 收起 : emojiJson[4]}}/div/div/div
/templatescriptconst emojiJson require(../utils/emoji.json);export default {props: {keyId: {type: String,required: false},layer: {type: Array || Object,required: false}},data() {return {emojiJson: emojiJson.data.split(,),isShowEmoji: false,}},methods: {chooseEmojiDefault(item) {console.log(item,item);this.$emit(chooseEmoji,this.keyId,this.layer,item);this.isShowEmoji false;}}
}/scriptstyle langscss scoped
// 纵向滚动条
mixin scroll-bar($width: 10px) {::-webkit-scrollbar-track {border-radius: 10px;background-color: #ffffff;}::-webkit-scrollbar {width: $width;height: 10px;background-color: #ffffff;}::-webkit-scrollbar-thumb {border-radius: 10px;background-color: rgba(0, 0, 0, 0.2);}
}.emoji {text-align: left;// width: 100%;// height: 100%;background: #fff;// border: 1px solid #dcdfe6;box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);.emoji-tabs {// border-top: 1px solid #DCDFE6;background: #f8f8f8;.emoji-tab {cursor: pointer;background: #ffffff;/* height: 100%; *//* padding: 5px 5px; *//* overflow: hidden; */text-align: center;/* line-height: 15px; */font-size: 25px}.new_tab {cursor: pointer;font-size: 14px;color: #1c33e5;text-align: center;padding: 5px 0;}}.emoji-default {width: calc(100% - 40px);height: 202px;overflow-y: auto;include scroll-bar();padding: 0px 20px;li {display: inline-block;padding: 5px;font-size: 24px;width: 29px;height: 29px;overflow: hidden;cursor: pointer;}li:hover {background-color: #d5d5d5;}}
}/style2. 在写公共方法的地方创建 emoji.json 文件里面是表情的数据内容如下
{data: ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,❤,,,,,,,,,,,,,❣,,,,☝,,,✌,✋,,,,✊,,,,,✍,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,☕,,,,,,,,,,,,,,,,,,,,,,,⚽,⚡,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,☠,,,,
}
在 Vue 文件中使用如下
templatedivcomment :buttonText发表评论//div
/template
效果如下
