github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update comment (#2366) 

* feat: update comment

* fix: children
pull/2373/head
xrkffgg 2020-06-08 15:24:40 +08:00 committed by GitHub
parent 3975cdea78
commit d00a971341
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/comment/index.jsx
View File

@ -1,7 +1,7 @@
import { inject } from 'vue';
import PropsTypes from '../_util/vue-types'; import PropsTypes from '../_util/vue-types';
import { getComponentFromProp, getListeners } from '../_util/props-util'; import { getComponent } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import Base from '../base';
export const CommentProps = { export const CommentProps = {
actions: PropsTypes.array, actions: PropsTypes.array,
/** The element to display as the comment author. */ /** The element to display as the comment author. */
@ -19,8 +19,10 @@ export const CommentProps = {
const Comment = { const Comment = {
name: 'AComment', name: 'AComment',
props: CommentProps, props: CommentProps,
inject: { setup() {
configProvider: { default: () => ConfigConsumerProps }, return {
configProvider: inject('configProvider', ConfigConsumerProps),
};
}, },
methods: { methods: {
getAction(actions) { getAction(actions) {
@ -41,11 +43,11 @@ const Comment = {
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('comment', customizePrefixCls); const prefixCls = getPrefixCls('comment', customizePrefixCls);
const actions = getComponentFromProp(this, 'actions'); const actions = getComponent(this, 'actions');
const author = getComponentFromProp(this, 'author'); const author = getComponent(this, 'author');
const avatar = getComponentFromProp(this, 'avatar'); const avatar = getComponent(this, 'avatar');
const content = getComponentFromProp(this, 'content'); const content = getComponent(this, 'content');
const datetime = getComponentFromProp(this, 'datetime'); const datetime = getComponent(this, 'datetime');
const avatarDom = ( const avatarDom = (
<div class={`${prefixCls}-avatar`}> <div class={`${prefixCls}-avatar`}>
@ -79,9 +81,9 @@ const Comment = {
{contentDom} {contentDom}
</div> </div>
); );
const children = this.$slots.default; const children = this.$slots.default && this.$slots.default();
return ( return (
<div class={prefixCls} {...{ on: getListeners(this) }}> <div class={prefixCls}>
{comment} {comment}
{children ? this.renderNested(prefixCls, children) : null} {children ? this.renderNested(prefixCls, children) : null}
</div> </div>
@ -90,8 +92,7 @@ const Comment = {
}; };
/* istanbul ignore next */ /* istanbul ignore next */
Comment.install = function(Vue) { Comment.install = function(app) {
Vue.use(Base); app.component(Comment.name, Comment);
Vue.component(Comment.name, Comment);
}; };
export default Comment; export default Comment;

2
examples/index.js
View File

@ -2,6 +2,7 @@ import '@babel/polyfill';
import { createApp } from 'vue'; import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import Button from 'ant-design-vue/button'; import Button from 'ant-design-vue/button';
import Comment from 'ant-design-vue/comment';
import Drawer from 'ant-design-vue/drawer'; import Drawer from 'ant-design-vue/drawer';
import Affix from 'ant-design-vue/affix'; import Affix from 'ant-design-vue/affix';
import Alert from 'ant-design-vue/alert'; import Alert from 'ant-design-vue/alert';
@ -15,6 +16,7 @@ import 'ant-design-vue/style.js';
createApp(App) createApp(App)
.use(Button) .use(Button)
.use(Comment)
.use(ConfigProvider) .use(ConfigProvider)
.use(Drawer) .use(Drawer)
.use(Affix) .use(Affix)