[uniapp] uni-ui+vue3.2小程序评论列表组件 回复评论 点赞和删除

<template>
  <view class="comment-list">
    <view class="comment-item" v-for="(item, index) in comments" :key="index">
      <view class="user-info">
        <image class="user-avatar" :src="item.avatar"></image>
        <text class="user-name">{{ item.username }}</text>
      </view>
      <text class="comment-content">{{ item.content }}</text>
      <view class="comment-actions">
        <u-icon name="chat" @click="replyComment(item)"></u-icon>
        <u-icon name="thumb-up" @click="likeComment(item)"></u-icon>
        <u-icon name="close" @click="deleteComment(item)"></u-icon>
      </view>
    </view>
  </view>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
 
const comments = ref([
  {
    id: 1,
    avatar: 'https://example.com/avatar1.png',
    username: '张三',
    content: '非常好用，推荐给所有人！',
  },
  // ...更多评论数据
]);
 
const replyComment = (comment) => {
  // 处理回复逻辑
};
 
const likeComment = (comment) => {
  // 处理点赞逻辑
};
 
const deleteComment = (comment) => {
  ElMessageBox.confirm('确定删除这条评论吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 从列表中删除评论
    comments.value = comments.value.filter(c => c.id !== comment.id);
  }).catch(() => {
    // 取消删除
  });
};
</script>
 
<style scoped>
.comment-list {
  /* 样式 */
}
.comment-item {
  /* 样式 */
}
.user-info {
  /* 样式 */
}
.user-avatar {
  /* 样式 */
}
.user-name {
  /* 样式 */
}
.comment-content {
  /* 样式 */
}
.comment-actions {
  /* 样式 */
}
/* 其他样式 */
</style>

这个代码实例展示了如何在uniapp项目中使用Vue 3.2和uni-ui创建一个评论列表组件，其中包含回复、点赞和删除评论的功能。使用了Element Plus的MessageBox进行删除确认，并且使用了Composition API（setup script）的写法。这个例子简洁且易于理解，适合作为学习uniapp和uni-ui使用的参考。