Comment评论

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

何时使用

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

Comment 评论 - 图1

基本评论

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

  1. <template>
  2. <a-comment>
  3. <template slot="actions">
  4. <span>
  5. <a-tooltip title="Like">
  6. <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like" />
  7. </a-tooltip>
  8. <span style="padding-left: '8px';cursor: 'auto'">
  9. {{likes}}
  10. </span>
  11. </span>
  12. <span>
  13. <a-tooltip title="Dislike">
  14. <a-icon
  15. type="dislike"
  16. :theme="action === 'disliked' ? 'filled' : 'outlined'"
  17. @click="dislike"
  18. />
  19. </a-tooltip>
  20. <span style="padding-left: '8px';cursor: 'auto'">
  21. {{dislikes}}
  22. </span>
  23. </span>
  24. <span>Reply to</span>
  25. </template>
  26. <a slot="author">Han Solo</a>
  27. <a-avatar
  28. src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  29. alt="Han Solo"
  30. slot="avatar"
  31. />
  32. <p slot="content">
  33. We supply a series of design principles, practical patterns and high quality design resources
  34. (Sketch and Axure), to help people create their product prototypes beautifully and
  35. efficiently.
  36. </p>
  37. <a-tooltip slot="datetime" :title="moment().format('YYYY-MM-DD HH:mm:ss')">
  38. <span>{{moment().fromNow()}}</span>
  39. </a-tooltip>
  40. </a-comment>
  41. </template>
  42. <script>
  43. import moment from 'moment';
  44. export default {
  45. data() {
  46. return {
  47. likes: 0,
  48. dislikes: 0,
  49. action: null,
  50. moment,
  51. };
  52. },
  53. methods: {
  54. like() {
  55. this.likes = 1;
  56. this.dislikes = 0;
  57. this.action = 'liked';
  58. },
  59. dislike() {
  60. this.likes = 0;
  61. this.dislikes = 1;
  62. this.action = 'disliked';
  63. },
  64. },
  65. };
  66. </script>

Comment 评论 - 图2

配合 List 组件

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

  1. <template>
  2. <a-list
  3. class="comment-list"
  4. :header="`${data.length} replies`"
  5. itemLayout="horizontal"
  6. :dataSource="data"
  7. >
  8. <a-list-item slot="renderItem" slot-scope="item, index">
  9. <a-comment :author="item.author" :avatar="item.avatar">
  10. <template slot="actions">
  11. <span v-for="action in item.actions">{{action}}</span>
  12. </template>
  13. <p slot="content">{{item.content}}</p>
  14. <a-tooltip slot="datetime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
  15. <span>{{item.datetime.fromNow()}}</span>
  16. </a-tooltip>
  17. </a-comment>
  18. </a-list-item>
  19. </a-list>
  20. </template>
  21. <script>
  22. import moment from 'moment';
  23. export default {
  24. data() {
  25. return {
  26. data: [
  27. {
  28. actions: ['Reply to'],
  29. author: 'Han Solo',
  30. avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  31. content:
  32. '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.',
  33. datetime: moment().subtract(1, 'days'),
  34. },
  35. {
  36. actions: ['Reply to'],
  37. author: 'Han Solo',
  38. avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  39. content:
  40. '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.',
  41. datetime: moment().subtract(2, 'days'),
  42. },
  43. ],
  44. moment,
  45. };
  46. },
  47. };
  48. </script>

Comment 评论 - 图3

嵌套评论

评论可以嵌套。

  1. <template>
  2. <a-comment>
  3. <span slot="actions">Reply to</span>
  4. <a slot="author">Han Solo</a>
  5. <a-avatar
  6. slot="avatar"
  7. src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  8. alt="Han Solo"
  9. />
  10. <p slot="content">
  11. We supply a series of design principles, practical patterns and high quality design resources
  12. (Sketch and Axure).
  13. </p>
  14. <a-comment>
  15. <span slot="actions">Reply to</span>
  16. <a slot="author">Han Solo</a>
  17. <a-avatar
  18. slot="avatar"
  19. src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  20. alt="Han Solo"
  21. />
  22. <p slot="content">
  23. We supply a series of design principles, practical patterns and high quality design
  24. resources (Sketch and Axure).
  25. </p>
  26. <a-comment>
  27. <span slot="actions">Reply to</span>
  28. <a slot="author">Han Solo</a>
  29. <a-avatar
  30. slot="avatar"
  31. src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  32. alt="Han Solo"
  33. />
  34. <p slot="content">
  35. We supply a series of design principles, practical patterns and high quality design
  36. resources (Sketch and Axure).
  37. </p>
  38. </a-comment>
  39. <a-comment>
  40. <span slot="actions">Reply to</span>
  41. <a slot="author">Han Solo</a>
  42. <a-avatar
  43. slot="avatar"
  44. src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  45. alt="Han Solo"
  46. />
  47. <p slot="content">
  48. We supply a series of design principles, practical patterns and high quality design
  49. resources (Sketch and Axure).
  50. </p>
  51. </a-comment>
  52. </a-comment>
  53. </a-comment>
  54. </template>

Comment 评论 - 图4

回复框

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

  1. <template>
  2. <div>
  3. <a-list
  4. v-if="comments.length"
  5. :dataSource="comments"
  6. :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
  7. itemLayout="horizontal"
  8. >
  9. <a-list-item slot="renderItem" slot-scope="item, index">
  10. <a-comment
  11. :author="item.author"
  12. :avatar="item.avatar"
  13. :content="item.content"
  14. :datetime="item.datetime"
  15. >
  16. </a-comment>
  17. </a-list-item>
  18. </a-list>
  19. <a-comment>
  20. <a-avatar
  21. slot="avatar"
  22. src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  23. alt="Han Solo"
  24. />
  25. <div slot="content">
  26. <a-form-item>
  27. <a-textarea :rows="4" @change="handleChange" :value="value"></a-textarea>
  28. </a-form-item>
  29. <a-form-item>
  30. <a-button htmlType="submit" :loading="submitting" @click="handleSubmit" type="primary">
  31. Add Comment
  32. </a-button>
  33. </a-form-item>
  34. </div>
  35. </a-comment>
  36. </div>
  37. </template>
  38. <script>
  39. import moment from 'moment';
  40. export default {
  41. data() {
  42. return {
  43. comments: [],
  44. submitting: false,
  45. value: '',
  46. moment,
  47. };
  48. },
  49. methods: {
  50. handleSubmit() {
  51. if (!this.value) {
  52. return;
  53. }
  54. this.submitting = true;
  55. setTimeout(() => {
  56. this.submitting = false;
  57. this.comments = [
  58. {
  59. author: 'Han Solo',
  60. avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  61. content: this.value,
  62. datetime: moment().fromNow(),
  63. },
  64. ...this.comments,
  65. ];
  66. this.value = '';
  67. }, 1000);
  68. },
  69. handleChange(e) {
  70. this.value = e.target.value;
  71. },
  72. },
  73. };
  74. </script>

API

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