uni-app评论组件

____Oliver

已于 2022-04-26 16:52:26 修改

阅读量2.2k

点赞数

文章标签： vue.js 前端 javascript css html5

于 2022-04-26 16:51:23 首次发布

本文链接：https://blog.csdn.net/weixin_45081480/article/details/123915889

版权

这是一个使用uni-app开发的评论组件示例，包含评论列表展示、回复功能、输入框及提交评论按钮。通过Vue.js的数据绑定和事件处理实现交互，如回复、删除评论等操作，并通过接口进行数据的增删。

摘要由CSDN通过智能技术生成

<template>
   <view class="comContainer">
       <h4>评论：</h4>
       <view class="readly" id="commentsBox">
           <view class="readly-item" v-for="(item, index) in commentsList" :key="index">
               <view class="nickName">{ { item.nickName }}</view>
               <view class="timeReply">
                   <view class="time">
                       <text>{ { item.createTime }}</text>
                   </view>
                   <view class="reply" v-if="userId == replyId">
                       
                       <text @tap="handleReply(index)">回复</text>
                       <text @tap="handleDelReply(item.commentId)">删除</text>
                   </view>
               </view>
               <view class="content">{ { item.content }}</view>

               <view v-if="item.replyContent || replyNum == index" class="replyBox">
                   <view class="replyCon" v-if="showReply">回复：{ { item.replyContent }}</view>
                   <u--textarea class="replyInp" v-if="!showReply" v-model="replyVal" placeholder="回复..." autoHeight focus @confirm="keyReply(item.commentId)"></u--textarea>
               </view>
           </view>
       </view>
       <u--textarea v-model="inpVal" placeholder="请输入内容" height="140" count @confirm="handleConfirm"></u--textarea>
       <view class="confirmBtn" @tap="handleConfirm">提交</view>
   </view>
</template>

最低0.47元/天解锁文章

____Oliver

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
uni-app评论组件

<template> <view class="comContainer"> <h4>评论：</h4> <view class="readly" id="commentsBox"> <view class="readly-item" v-for="(item, index) in commentsList" :key="index"> &lt...
复制链接

扫一扫