移动端评论功能

最新推荐文章于 2024-09-25 00:17:53 发布

原创

最新推荐文章于 2024-09-25 00:17:53 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

这篇博客主要记录了在H5端实现评论功能的过程，包括评论主体、点击展示的页面组件、评论列表和回复列表的创建。重点提及在Vue框架中，通过子组件使用this.$emit()方法向父组件传递数据。

最近要写一个h5端的评论功能，记录在此：

1.首先是评论的主体部分

<template>
	<div v-if="!preview" class="medical_comment">
		<div class="medical_comment_top">
			<div class="medical_comment_top_all">全部评论(<span class="comment_count">{
  
  { commentCount }}</span>)</div>
			<ul class="comment_list">
				<van-list                        // 这是vant组件库的瀑布流加载
					v-model="loading"
					:finished="finished"
					:finished-text="commentList.length ? '没有更多了' : '暂无评论'"
					:immediate-check="false"
					@load="loadMore"
				>
					<div class="medical_head_comment_item_wrapper">
						<medical-head-comment-item    // 这是展示评论的地方，单独写了个组件
							v-for="(item, index) of commentList"
							:key="'comment_item' + index"
							:comment="item"
							@reply="handleReply"
						></medical-head-comment-item>
					</div>
				</van-list>
			</ul>
			<div v-if="replyInputVisable" class="reply_wrap