diff --git a/components/_util/props-util.js b/components/_util/props-util.js index 98314f755..904cf5279 100644 --- a/components/_util/props-util.js +++ b/components/_util/props-util.js @@ -1,6 +1,6 @@ import isPlainObject from 'lodash/isPlainObject'; import classNames from 'classnames'; -import { isVNode, Fragment, Comment, Text } from 'vue'; +import { isVNode, Fragment, Comment, Text, h } from 'vue'; import { camelize, hyphenate, isOn, resolvePropValue } from './util'; import isValid from './isValid'; // function getType(fn) { @@ -187,7 +187,7 @@ const getComponent = (instance, prop = 'default', options = instance, execute = }; const getComponentFromProp = (instance, prop, options = instance, execute = true) => { if (instance.$createElement) { - const h = instance.$createElement; + // const h = instance.$createElement; const temp = instance[prop]; if (temp !== undefined) { return typeof temp === 'function' && execute ? temp(h, options) : temp; @@ -199,7 +199,7 @@ const getComponentFromProp = (instance, prop, options = instance, execute = true undefined ); } else { - const h = instance.context.$createElement; + // const h = instance.context.$createElement; const temp = getPropsData(instance)[prop]; if (temp !== undefined) { return typeof temp === 'function' && execute ? temp(h, options) : temp; diff --git a/components/badge/Badge.jsx b/components/badge/Badge.jsx index 66211411e..63b53a7be 100644 --- a/components/badge/Badge.jsx +++ b/components/badge/Badge.jsx @@ -12,6 +12,7 @@ import { cloneElement } from '../_util/vnode'; import getTransitionProps from '../_util/getTransitionProps'; import isNumeric from '../_util/isNumeric'; import { ConfigConsumerProps } from '../config-provider'; +import { inject } from 'vue'; const BadgeProps = { /** Number to show in badge */ @@ -40,8 +41,10 @@ export default { dot: false, overflowCount: 99, }), - inject: { - configProvider: { default: () => ConfigConsumerProps }, + setup() { + return { + configProvider: inject('configProvider', ConfigConsumerProps), + }; }, methods: { getNumberedDispayCount() { @@ -80,7 +83,7 @@ export default { : { ...numberStyle }; }, getBadgeClassName(prefixCls) { - const children = filterEmpty(this.$slots.default); + const children = filterEmpty(this.$slots.default && this.$slots.default()); const hasStatus = this.hasStatus(); return classNames(prefixCls, { [`${prefixCls}-status`]: hasStatus, @@ -181,7 +184,7 @@ export default { const prefixCls = getPrefixCls('badge', customizePrefixCls); const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls); - const children = filterEmpty($slots.default); + const children = filterEmpty($slots.default && $slots.default()); let count = getComponentFromProp(this, 'count'); if (Array.isArray(count)) { count = count[0]; diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.jsx index d0899bd5c..2c982ae9d 100644 --- a/components/badge/ScrollNumber.jsx +++ b/components/badge/ScrollNumber.jsx @@ -5,6 +5,7 @@ import { getStyle } from '../_util/props-util'; import omit from 'omit.js'; import { cloneElement } from '../_util/vnode'; import { ConfigConsumerProps } from '../config-provider'; +import { inject } from 'vue'; function getNumberArray(num) { return num @@ -31,8 +32,10 @@ const ScrollNumberProps = { export default { mixins: [BaseMixin], props: ScrollNumberProps, - inject: { - configProvider: { default: () => ConfigConsumerProps }, + setup() { + return { + configProvider: inject('configProvider', ConfigConsumerProps), + }; }, data() { return { diff --git a/components/badge/index.js b/components/badge/index.js index ca5f798f0..536522bcd 100644 --- a/components/badge/index.js +++ b/components/badge/index.js @@ -1,10 +1,8 @@ import Badge from './Badge'; -import Base from '../base'; /* istanbul ignore next */ -Badge.install = function(Vue) { - Vue.use(Base); - Vue.component(Badge.name, Badge); +Badge.install = function(app) { + app.component(Badge.name, Badge); }; export default Badge; diff --git a/examples/index.js b/examples/index.js index 4b0454161..2d8b784a1 100644 --- a/examples/index.js +++ b/examples/index.js @@ -2,6 +2,7 @@ import '@babel/polyfill'; import { createApp } from 'vue'; import App from './App.vue'; import { + Badge, AutoComplete, Radio, Spin, @@ -23,6 +24,7 @@ import { notification, message, } from 'ant-design-vue'; + import 'ant-design-vue/style.js'; const basic = { @@ -51,6 +53,7 @@ app .use(Tooltip) .use(Col) .use(Row) + .use(Badge) .use(Radio) .use(Switch) .use(Checkbox)