Comment评论 - 图1

Comment 评论

对网站内容的反馈、评价和讨论。

何时使用

评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。

代码演示

Comment评论 - 图2

基本评论

一个基本的评论组件，带有作者、头像、时间和操作。

  1. <template>
  2.   <a-comment>
  3.     <template #actions>
  4.       <span key="comment-basic-like">
  5.         <a-tooltip title="Like">
  6.           <template v-if="action === 'liked'">
  7.             <LikeFilled @click="like" />
  8.           </template>
  9.           <template v-else>
  10.             <LikeOutlined @click="like" />
  11.           </template>
  12.         </a-tooltip>
  13.         <span style="padding-left: 8px; cursor: auto">
  14.           {{ likes }}
  15.         </span>
  16.       </span>
  17.       <span key="comment-basic-dislike">
  18.         <a-tooltip title="Dislike">
  19.           <template v-if="action === 'disliked'">
  20.             <DislikeFilled @click="dislike" />
  21.           </template>
  22.           <template v-else>
  23.             <DislikeOutlined @click="dislike" />
  24.           </template>
  25.         </a-tooltip>
  26.         <span style="padding-left: 8px; cursor: auto">
  27.           {{ dislikes }}
  28.         </span>
  29.       </span>
  30.       <span key="comment-basic-reply-to">Reply to</span>
  31.     </template>
  32.     <template #author><a>Han Solo</a></template>
  33.     <template #avatar>
  34.       <a-avatar
  35.         src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  36.         alt="Han Solo"
  37.       />
  38.     </template>
  39.     <template #content>
  40.       <p>
  41.         We supply a series of design principles, practical patterns and high quality design
  42.         resources (Sketch and Axure), to help people create their product prototypes beautifully and
  43.         efficiently.
  44.       </p>
  45.     </template>
  46.     <template #datetime>
  47.       <a-tooltip :title="moment().format('YYYY-MM-DD HH:mm:ss')">
  48.         <span>{{ moment().fromNow() }}</span>
  49.       </a-tooltip>
  50.     </template>
  51.   </a-comment>
  52. </template>
  53. <script lang="ts">
  54. import moment from 'moment';
  55. import { LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined } from '@ant-design/icons-vue';
  56. import { defineComponent, ref } from 'vue';
  57. export default defineComponent({
  58.   components: {
  59.     LikeFilled,
  60.     LikeOutlined,
  61.     DislikeFilled,
  62.     DislikeOutlined,
  63.   },
  64.   setup() {
  65.     const likes = ref<number>(0);
  66.     const dislikes = ref<number>(0);
  67.     const action = ref<string>();
  69.     const like = () => {
  70.       likes.value = 1;
  71.       dislikes.value = 0;
  72.       action.value = 'liked';
  73.     };
  75.     const dislike = () => {
  76.       likes.value = 0;
  77.       dislikes.value = 1;
  78.       action.value = 'disliked';
  79.     };
  81.     return {
  82.       likes,
  83.       dislikes,
  84.       action,
  85.       like,
  86.       dislike,
  87.       moment,
  88.     };
  89.   },
  90. });
  91. </script>

Comment评论 - 图3

嵌套评论

评论可以嵌套。

  1. <template>
  2.   <a-comment>
  3.     <template #actions>
  4.       <span key="comment-nested-reply-to">Reply to</span>
  5.     </template>
  6.     <template #author>
  7.       <a>Han Solo</a>
  8.     </template>
  9.     <template #avatar>
  10.       <a-avatar
  11.         src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  12.         alt="Han Solo"
  13.       />
  14.     </template>
  15.     <template #content>
  16.       <p>
  17.         We supply a series of design principles, practical patterns and high quality design
  18.         resources (Sketch and Axure).
  19.       </p>
  20.     </template>
  21.     <a-comment>
  22.       <template #actions>
  23.         <span>Reply to</span>
  24.       </template>
  25.       <template #author>
  26.         <a>Han Solo</a>
  27.       </template>
  28.       <template #avatar>
  29.         <a-avatar
  30.           src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  31.           alt="Han Solo"
  32.         />
  33.       </template>
  34.       <template #content>
  35.         <p>
  36.           We supply a series of design principles, practical patterns and high quality design
  37.           resources (Sketch and Axure).
  38.         </p>
  39.       </template>
  40.       <a-comment>
  41.         <template #actions>
  42.           <span>Reply to</span>
  43.         </template>
  44.         <template #author>
  45.           <a>Han Solo</a>
  46.         </template>
  47.         <template #avatar>
  48.           <a-avatar
  49.             src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  50.             alt="Han Solo"
  51.           />
  52.         </template>
  53.         <template #content>
  54.           <p>
  55.             We supply a series of design principles, practical patterns and high quality design
  56.             resources (Sketch and Axure).
  57.           </p>
  58.         </template>
  59.       </a-comment>
  60.       <a-comment>
  61.         <template #actions>
  62.           <span>Reply to</span>
  63.         </template>
  64.         <template #author>
  65.           <a>Han Solo</a>
  66.         </template>
  67.         <template #avatar>
  68.           <a-avatar
  69.             src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  70.             alt="Han Solo"
  71.           />
  72.         </template>
  73.         <template #content>
  74.           <p>
  75.             We supply a series of design principles, practical patterns and high quality design
  76.             resources (Sketch and Axure).
  77.           </p>
  78.         </template>
  79.       </a-comment>
  80.     </a-comment>
  81.   </a-comment>
  82. </template>

Comment评论 - 图4

配合 List 组件

配合 List 组件展现评论列表。

  1. <template>
  2.   <a-list
  3.     class="comment-list"
  4.     :header="`${data.length} replies`"
  5.     item-layout="horizontal"
  6.     :data-source="data"
  7.   >
  8.     <template #renderItem="{ item }">
  9.       <a-list-item>
  10.         <a-comment :author="item.author" :avatar="item.avatar">
  11.           <template #actions>
  12.             <span v-for="(action, index) in item.actions" :key="index">{{ action }}</span>
  13.           </template>
  14.           <template #content>
  15.             <p>
  16.               {{ item.content }}
  17.             </p>
  18.           </template>
  19.           <template #datetime>
  20.             <a-tooltip :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
  21.               <span>{{ item.datetime.fromNow() }}</span>
  22.             </a-tooltip>
  23.           </template>
  24.         </a-comment>
  25.       </a-list-item>
  26.     </template>
  27.   </a-list>
  28. </template>
  29. <script lang="ts">
  30. import moment from 'moment';
  31. import { defineComponent } from 'vue';
  32. export default defineComponent({
  33.   setup() {
  34.     return {
  35.       data: [
  36.         {
  37.           actions: ['Reply to'],
  38.           author: 'Han Solo',
  39.           avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  40.           content:
  41.             'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  42.           datetime: moment().subtract(1, 'days'),
  43.         },
  44.         {
  45.           actions: ['Reply to'],
  46.           author: 'Han Solo',
  47.           avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  48.           content:
  49.             'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  50.           datetime: moment().subtract(2, 'days'),
  51.         },
  52.       ],
  53.       moment,
  54.     };
  55.   },
  56. });
  57. </script>

Comment评论 - 图5

回复框

评论编辑器组件提供了相同样式的封装以支持自定义评论编辑器。

  1. <template>
  2.   <a-list
  3.     v-if="comments.length"
  4.     :data-source="comments"
  5.     :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
  6.     item-layout="horizontal"
  7.   >
  8.     <template #renderItem="{ item }">
  9.       <a-list-item>
  10.         <a-comment
  11.           :author="item.author"
  12.           :avatar="item.avatar"
  13.           :content="item.content"
  14.           :datetime="item.datetime"
  15.         />
  16.       </a-list-item>
  17.     </template>
  18.   </a-list>
  19.   <a-comment>
  20.     <template #avatar>
  21.       <a-avatar
  22.         src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  23.         alt="Han Solo"
  24.       />
  25.     </template>
  26.     <template #content>
  27.       <a-form-item>
  28.         <a-textarea :rows="4" v-model:value="value" />
  29.       </a-form-item>
  30.       <a-form-item>
  31.         <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
  32.           Add Comment
  33.         </a-button>
  34.       </a-form-item>
  35.     </template>
  36.   </a-comment>
  37. </template>
  38. <script lang="ts">
  39. import { defineComponent, ref } from 'vue';
  40. import moment from 'moment';
  42. type Comment = Record<string, string>;
  44. export default defineComponent({
  45.   setup() {
  46.     const comments = ref<Comment[]>([]);
  47.     const submitting = ref<boolean>(false);
  48.     const value = ref<string>('');
  49.     const handleSubmit = () => {
  50.       if (!value.value) {
  51.         return;
  52.       }
  54.       submitting.value = true;
  56.       setTimeout(() => {
  57.         submitting.value = false;
  58.         comments.value = [
  59.           {
  60.             author: 'Han Solo',
  61.             avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  62.             content: value.value,
  63.             datetime: moment().fromNow(),
  64.           },
  65.           ...comments.value,
  66.         ];
  67.         value.value = '';
  68.       }, 1000);
  69.     };
  71.     return {
  72.       comments,
  73.       submitting,
  74.       value,
  75.       handleSubmit,
  76.     };
  77.   },
  78. });
  79. </script>

API

PropertyDescriptionTypeDefault
actions在评论内容下面呈现的操作项列表Array|slot-
author要显示为注释作者的元素string|slot-
avatar要显示为评论头像的元素 - 通常是 antd Avatar 或者 srcstring|slot-
content评论的主要内容string|slot-
datetime展示时间描述string|slot-