Skip to content

Commit f597775

Browse files
tangjinzhoutangjinzhou
committed
feat: update comment
1 parent 75e5f04 commit f597775

File tree

8 files changed

+39
-61
lines changed

8 files changed

+39
-61
lines changed

‎components/comment/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
6868
<div class="ant-comment-inner">
6969
<div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
7070
<div class="ant-comment-content">
71-
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span></div>
71+
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span><span class="ant-comment-content-author-time"><span class="">a day ago</span></span></div>
7272
<div class="ant-comment-content-detail">
7373
<p>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.</p>
7474
</div>
@@ -86,7 +86,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
8686
<div class="ant-comment-inner">
8787
<div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
8888
<div class="ant-comment-content">
89-
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span></div>
89+
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span><span class="ant-comment-content-author-time"><span class="">2 days ago</span></span></div>
9090
<div class="ant-comment-content-detail">
9191
<p>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.</p>
9292
</div>

‎components/comment/demo/basic.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ A basic comment with author, avatar, time and actions.
2020
@click="like"
2121
/>
2222
</a-tooltip>
23-
<span style="paddingLeft: '8px';cursor: 'auto'">
23+
<span style="padding-left: '8px';cursor: 'auto'">
2424
{{likes}}
2525
</span>
2626
</span>
@@ -32,7 +32,7 @@ A basic comment with author, avatar, time and actions.
3232
@click="dislike"
3333
/>
3434
</a-tooltip>
35-
<span style="paddingLeft: '8px';cursor: 'auto'">
35+
<span style="padding-left: '8px';cursor: 'auto'">
3636
{{dislikes}}
3737
</span>
3838
</span>

‎components/comment/demo/editor.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Comment can be used as editor, user can customize the editor component.
3535
/>
3636
<div slot="content">
3737
<a-form-item>
38-
<a-textarea rows=4 @change="handleChange" :value="value" ></a-textarea>
38+
<a-textarea :rows="4" @change="handleChange" :value="value" ></a-textarea>
3939
</a-form-item>
4040
<a-form-item>
4141
<a-button

‎components/comment/demo/list.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Displaying a series of comments using the `antd` List Component.
2525
<span v-for="action in item.actions">{{action}}</span>
2626
</template>
2727
<p slot="content">{{item.content}}</p>
28-
<a-tooltip slot="dateTime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
28+
<a-tooltip slot="datetime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
2929
<span>{{item.datetime.fromNow()}}</span>
3030
</a-tooltip>
3131
</a-comment>

‎components/comment/demo/nested.md

Lines changed: 24 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,61 +11,41 @@ Comments can be nested.
1111
```html
1212
<template>
1313
<a-comment>
14-
<template slot="actions">
15-
<span>Reply to</span>
16-
</template>
17-
<template slot="author">
18-
<a>Han Solo</a>
19-
</template>
20-
<template slot="avatar">
14+
<span slot="actions">Reply to</span>
15+
<a slot="author">Han Solo</a>
16+
<a-avatar
17+
slot="avatar"
18+
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
19+
alt="Han Solo"
20+
/>
21+
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
22+
<a-comment>
23+
<span slot="actions">Reply to</span>
24+
<a slot="author">Han Solo</a>
2125
<a-avatar
26+
slot="avatar"
2227
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
2328
alt="Han Solo"
2429
/>
25-
</template>
26-
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
27-
<a-comment>
28-
<template slot="actions">
29-
<span>Reply to</span>
30-
</template>
31-
<template slot="author">
32-
<a>Han Solo</a>
33-
</template>
34-
<template slot="avatar">
30+
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
31+
<a-comment>
32+
<span slot="actions">Reply to</span>
33+
<a slot="author">Han Solo</a>
3534
<a-avatar
35+
slot="avatar"
3636
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
3737
alt="Han Solo"
3838
/>
39-
</template>
40-
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
41-
<a-comment>
42-
<template slot="actions">
43-
<span>Reply to</span>
44-
</template>
45-
<template slot="author">
46-
<a>Han Solo</a>
47-
</template>
48-
<template slot="avatar">
49-
<a-avatar
50-
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
51-
alt="Han Solo"
52-
/>
53-
</template>
5439
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
5540
</a-comment>
5641
<a-comment>
57-
<template slot="actions">
58-
<span>Reply to</span>
59-
</template>
60-
<template slot="author">
61-
<a>Han Solo</a>
62-
</template>
63-
<template slot="avatar">
64-
<a-avatar
65-
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
66-
alt="Han Solo"
67-
/>
68-
</template>
42+
<span slot="actions">Reply to</span>
43+
<a slot="author">Han Solo</a>
44+
<a-avatar
45+
slot="avatar"
46+
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
47+
alt="Han Solo"
48+
/>
6949
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
7050
</a-comment>
7151
</a-comment>

‎components/comment/index.en-US.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22

33
| Property | Description | Type | Default |
44
| -------- | ----------- | ---- | ------- |
5-
| actions | List of action items rendered below the comment content | Array | slot | - |
5+
| actions | List of action items rendered below the comment content | Array \| slot | - |
66
| author | The element to display as the comment author | string\|slot | - |
77
| avatar | The element to display as the comment avatar - generally an antd `Avatar` or src | string\|slot | - |
8-
| children | Nested comments should be provided as children of the Comment | slot | - |
98
| content | The main content of the comment | string\|slot | - |
109
| datetime | A datetime element containing the time to be displayed | string\|slot | - |

‎components/comment/index.jsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Comment = {
3232
renderNested (children) {
3333
const { prefixCls } = this.$props
3434

35-
return <div class={classNames(`${prefixCls}-nested`)}>{children}</div>
35+
return <div class={`${prefixCls}-nested`}>{children}</div>
3636
},
3737
},
3838

@@ -41,11 +41,11 @@ const Comment = {
4141
prefixCls,
4242
} = this.$props
4343

44-
const actions = this.$props.actions || getComponentFromProp(this, 'actions')
45-
const author = this.$props.author || getComponentFromProp(this, 'author')
46-
const avatar = this.$props.avatar || getComponentFromProp(this, 'avatar')
47-
const content = this.$props.content || getComponentFromProp(this, 'content')
48-
const datetime = this.$props.datetime || getComponentFromProp(this, 'datetime')
44+
const actions = getComponentFromProp(this, 'actions')
45+
const author = getComponentFromProp(this, 'author')
46+
const avatar = getComponentFromProp(this, 'avatar')
47+
const content = getComponentFromProp(this, 'content')
48+
const datetime = getComponentFromProp(this, 'datetime')
4949

5050
const avatarDom = (
5151
<div class={`${prefixCls}-avatar`}>
@@ -81,7 +81,7 @@ const Comment = {
8181
)
8282
const children = this.$slots.default
8383
return (
84-
<div class={classNames(prefixCls)}>
84+
<div class={prefixCls} {...{ on: this.$listeners }}>
8585
{comment}
8686
{children ? this.renderNested(children) : null}
8787
</div>

‎components/comment/index.zh-CN.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22

33
| Property | Description | Type | Default |
44
| -------- | ----------- | ---- | ------- |
5-
| actions | 在评论内容下面呈现的操作项列表 | Array|slot | - |
5+
| actions | 在评论内容下面呈现的操作项列表 | Array\|slot | - |
66
| author | 要显示为注释作者的元素 | string\|slot | - |
77
| avatar | 要显示为评论头像的元素 - 通常是 antd `Avatar` 或者src | string\|slot | - |
8-
| children | 嵌套注释应作为注释的子项提供 | slot | - |
98
| content | 评论的主要内容 | string\|slot | - |
109
| datetime | 展示时间描述 | string\|slot | - |

0 commit comments

Comments
 (0)