用uni-app写一个评论卡
时间: 2024-02-05 11:04:37 浏览: 23
好的,下面是一个简单的评论卡示例:
```html
<template>
<div class="comment-card">
<div class="comment-avatar">
<img :src="avatar" alt="avatar">
</div>
<div class="comment-content">
<div class="comment-header">
<span>{{ username }}</span>
<span>{{ date }}</span>
</div>
<div class="comment-body">
<p>{{ comment }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
avatar: {
type: String,
required: true
},
username: {
type: String,
required: true
},
date: {
type: String,
required: true
},
comment: {
type: String,
required: true
}
}
}
</script>
<style scoped>
.comment-card {
display: flex;
margin-bottom: 20px;
}
.comment-avatar {
width: 50px;
height: 50px;
margin-right: 10px;
}
.comment-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.comment-content {
flex: 1;
}
.comment-header {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #666;
margin-bottom: 10px;
}
.comment-body {
font-size: 16px;
color: #333;
line-height: 1.5;
}
</style>
```
这个评论卡组件包含以下属性:
- `avatar`:评论者头像的链接
- `username`:评论者用户名
- `date`:评论时间
- `comment`:评论内容
使用方法:
```html
<template>
<div>
<comment-card
avatar="https://example.com/avatar.png"
username="Alice"
date="2021-01-01 10:00"
comment="这是一条评论"
/>
</div>
</template>
<script>
import CommentCard from '@/components/CommentCard'
export default {
components: {
CommentCard
}
}
</script>
```
你可以根据自己的需求进行样式和布局的调整。