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 avatar (#2372)

pull/2371/head
xrkffgg 2020-06-08 15:38:07 +08:00 committed by GitHub
parent d00a971341
commit 4ef17f8144
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/avatar/Avatar.jsx
View File

@ -1,5 +1,6 @@
import { inject } from 'vue';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import { getListeners, getComponentFromProp } from '../_util/props-util'; import { getComponent } from '../_util/props-util';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
export default { export default {
@ -26,8 +27,10 @@ export default {
alt: String, alt: String,
loadError: Function, loadError: Function,
}, },
inject: { setup() {
configProvider: { default: () => ConfigConsumerProps }, return {
configProvider: inject('configProvider', ConfigConsumerProps),
};
}, },
data() { data() {
return { return {
@ -87,7 +90,7 @@ export default {
}, },
render() { render() {
const { prefixCls: customizePrefixCls, shape, size, src, alt, srcSet } = this.$props; const { prefixCls: customizePrefixCls, shape, size, src, alt, srcSet } = this.$props;
const icon = getComponentFromProp(this, 'icon'); const icon = getComponent(this, 'icon');
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('avatar', customizePrefixCls); const prefixCls = getPrefixCls('avatar', customizePrefixCls);
@ -116,7 +119,7 @@ export default {
} }
: {}; : {};
let children = this.$slots.default; let children = this.$slots.default && this.$slots.default();
if (src && isImgExist) { if (src && isImgExist) {
children = <img src={src} srcSet={srcSet} onError={this.handleImgLoadError} alt={alt} />; children = <img src={src} srcSet={srcSet} onError={this.handleImgLoadError} alt={alt} />;
} else if (icon) { } else if (icon) {
@ -158,7 +161,7 @@ export default {
} }
} }
return ( return (
<span ref="avatarNode" {...{ on: getListeners(this), class: classString, style: sizeStyle }}> <span ref="avatarNode" {...{ class: classString, style: sizeStyle }}>
{children} {children}
</span> </span>
); );

6
components/avatar/index.js
View File

@ -1,10 +1,8 @@
import Avatar from './Avatar'; import Avatar from './Avatar';
import Base from '../base';
/* istanbul ignore next */ /* istanbul ignore next */
Avatar.install = function(Vue) { Avatar.install = function(app) {
Vue.use(Base); app.component(Avatar.name, Avatar);
Vue.component(Avatar.name, Avatar);
}; };
export default Avatar; export default Avatar;

2
examples/index.js
View File

@ -1,6 +1,7 @@
import '@babel/polyfill'; import '@babel/polyfill';
import { createApp } from 'vue'; import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import Avatar from 'ant-design-vue/avatar';
import Button from 'ant-design-vue/button'; import Button from 'ant-design-vue/button';
import Comment from 'ant-design-vue/comment'; import Comment from 'ant-design-vue/comment';
import Drawer from 'ant-design-vue/drawer'; import Drawer from 'ant-design-vue/drawer';
@ -15,6 +16,7 @@ import Timeline from 'ant-design-vue/timeline';
import 'ant-design-vue/style.js'; import 'ant-design-vue/style.js';
createApp(App) createApp(App)
.use(Avatar)
.use(Button) .use(Button)
.use(Comment) .use(Comment)
.use(ConfigProvider) .use(ConfigProvider)