test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-02 20:18:22 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat: update comment

Browse Source
This commit is contained in:
tangjinzhou 2019-01-02 11:03:46 +08:00
parent 75e5f04d1e
commit f59777501f
8 changed files with 39 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/comment/__tests__/__snapshots__/demo.test.js.snap
View File

@ -68,7 +68,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
<div class="ant-comment-inner">
<div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
<div class="ant-comment-content">
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span></div>
<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>
<div class="ant-comment-content-detail">
<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>
</div>
@ -86,7 +86,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
<div class="ant-comment-inner">
<div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
<div class="ant-comment-content">
<div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span></div>
<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>
<div class="ant-comment-content-detail">
<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>
</div>

4
components/comment/demo/basic.md
View File

@ -20,7 +20,7 @@ A basic comment with author, avatar, time and actions.
@click="like"
/>
</a-tooltip>
<span style="paddingLeft: '8px';cursor: 'auto'">
<span style="padding-left: '8px';cursor: 'auto'">
{{likes}}
</span>
</span>
@ -32,7 +32,7 @@ A basic comment with author, avatar, time and actions.
@click="dislike"
/>
</a-tooltip>
<span style="paddingLeft: '8px';cursor: 'auto'">
<span style="padding-left: '8px';cursor: 'auto'">
{{dislikes}}
</span>
</span>

2
components/comment/demo/editor.md
View File

@ -35,7 +35,7 @@ Comment can be used as editor, user can customize the editor component.
/>
<div slot="content">
<a-form-item>
<a-textarea rows=4 @change="handleChange" :value="value" ></a-textarea>
<a-textarea :rows="4" @change="handleChange" :value="value" ></a-textarea>
</a-form-item>
<a-form-item>
<a-button

2
components/comment/demo/list.md
View File

@ -25,7 +25,7 @@ Displaying a series of comments using the `antd` List Component.
<span v-for="action in item.actions">{{action}}</span>
</template>
<p slot="content">{{item.content}}</p>
<a-tooltip slot="dateTime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
<a-tooltip slot="datetime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
<span>{{item.datetime.fromNow()}}</span>
</a-tooltip>
</a-comment>

68
components/comment/demo/nested.md
View File

@ -11,61 +11,41 @@ Comments can be nested.
```html
<template>
<a-comment>
<template slot="actions">
<span>Reply to</span>
</template>
<template slot="author">
<a>Han Solo</a>
</template>
<template slot="avatar">
<span slot="actions">Reply to</span>
<a slot="author">Han Solo</a>
<a-avatar
slot="avatar"
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
<a-comment>
<span slot="actions">Reply to</span>
<a slot="author">Han Solo</a>
<a-avatar
slot="avatar"
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
</template>
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
<a-comment>
<template slot="actions">
<span>Reply to</span>
</template>
<template slot="author">
<a>Han Solo</a>
</template>
<template slot="avatar">
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
<a-comment>
<span slot="actions">Reply to</span>
<a slot="author">Han Solo</a>
<a-avatar
slot="avatar"
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
</template>
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
<a-comment>
<template slot="actions">
<span>Reply to</span>
</template>
<template slot="author">
<a>Han Solo</a>
</template>
<template slot="avatar">
<a-avatar
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
</template>
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
</a-comment>
<a-comment>
<template slot="actions">
<span>Reply to</span>
</template>
<template slot="author">
<a>Han Solo</a>
</template>
<template slot="avatar">
<a-avatar
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
</template>
<span slot="actions">Reply to</span>
<a slot="author">Han Solo</a>
<a-avatar
slot="avatar"
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
<p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
</a-comment>
</a-comment>

3
components/comment/index.en-US.md
View File

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

14
components/comment/index.jsx
View File

@ -32,7 +32,7 @@ const Comment = {
renderNested (children) {
const { prefixCls } = this.$props
return <div class={classNames(`${prefixCls}-nested`)}>{children}</div>
return <div class={`${prefixCls}-nested`}>{children}</div>
},
},
@ -41,11 +41,11 @@ const Comment = {
prefixCls,
} = this.$props
const actions = this.$props.actions || getComponentFromProp(this, 'actions')
const author = this.$props.author || getComponentFromProp(this, 'author')
const avatar = this.$props.avatar || getComponentFromProp(this, 'avatar')
const content = this.$props.content || getComponentFromProp(this, 'content')
const datetime = this.$props.datetime || getComponentFromProp(this, 'datetime')
const actions = getComponentFromProp(this, 'actions')
const author = getComponentFromProp(this, 'author')
const avatar = getComponentFromProp(this, 'avatar')
const content = getComponentFromProp(this, 'content')
const datetime = getComponentFromProp(this, 'datetime')
const avatarDom = (
<div class={`${prefixCls}-avatar`}>
@ -81,7 +81,7 @@ const Comment = {
)
const children = this.$slots.default
return (
<div class={classNames(prefixCls)}>
<div class={prefixCls} {...{ on: this.$listeners }}>
{comment}
{children ? this.renderNested(children) : null}
</div>

3
components/comment/index.zh-CN.md
View File

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