diff --git a/components/anchor/Anchor.jsx b/components/anchor/Anchor.jsx index 485bb9e22..8667d83e4 100644 --- a/components/anchor/Anchor.jsx +++ b/components/anchor/Anchor.jsx @@ -1,3 +1,4 @@ +import { inject } from 'vue'; import PropTypes from '../_util/vue-types'; import classNames from 'classnames'; import addEventListener from '../vc-util/Dom/addEventListener'; @@ -98,8 +99,10 @@ export default { showInkInFixed: false, getContainer: getDefaultContainer, }), - inject: { - configProvider: { default: () => ConfigConsumerProps }, + setup() { + return { + configProvider: inject('configProvider', ConfigConsumerProps), + }; }, data() { this.links = []; @@ -294,7 +297,7 @@ export default {
- {$slots.default} + {$slots.default && $slots.default()} ); diff --git a/components/anchor/AnchorLink.jsx b/components/anchor/AnchorLink.jsx index ca36495f2..c49c0fca3 100644 --- a/components/anchor/AnchorLink.jsx +++ b/components/anchor/AnchorLink.jsx @@ -1,5 +1,6 @@ +import { inject } from 'vue'; import PropTypes from '../_util/vue-types'; -import { initDefaultProps, getComponentFromProp } from '../_util/props-util'; +import { initDefaultProps, getComponent } from '../_util/props-util'; import classNames from 'classnames'; import { ConfigConsumerProps } from '../config-provider'; @@ -15,10 +16,12 @@ export default { props: initDefaultProps(AnchorLinkProps, { href: '#', }), - inject: { - antAnchor: { default: () => ({}) }, - antAnchorContext: { default: () => ({}) }, - configProvider: { default: () => ConfigConsumerProps }, + setup() { + return { + antAnchor: inject('antAnchor', {}), + antAnchorContext: inject('antAnchorContext', {}), + configProvider: inject('configProvider', ConfigConsumerProps), + }; }, watch: { href(val, oldVal) { @@ -53,7 +56,7 @@ export default { const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('anchor', customizePrefixCls); - const title = getComponentFromProp(this, 'title'); + const title = getComponent(this, 'title'); const active = this.antAnchor.$data.activeLink === href; const wrapperClassName = classNames(`${prefixCls}-link`, { [`${prefixCls}-link-active`]: active, @@ -72,7 +75,7 @@ export default { > {title} - {$slots.default} + {$slots.default && $slots.default()} ); }, diff --git a/components/anchor/index.jsx b/components/anchor/index.jsx index cc927851e..f031c9c63 100644 --- a/components/anchor/index.jsx +++ b/components/anchor/index.jsx @@ -1,14 +1,12 @@ import Anchor from './Anchor'; import AnchorLink from './AnchorLink'; -import Base from '../base'; Anchor.Link = AnchorLink; /* istanbul ignore next */ -Anchor.install = function(Vue) { - Vue.use(Base); - Vue.component(Anchor.name, Anchor); - Vue.component(Anchor.Link.name, Anchor.Link); +Anchor.install = function(app) { + app.component(Anchor.name, Anchor); + app.component(Anchor.Link.name, Anchor.Link); }; export { AnchorProps } from './Anchor'; export { AnchorLinkProps } from './AnchorLink'; diff --git a/examples/index.js b/examples/index.js index 35e7271fe..496092d97 100644 --- a/examples/index.js +++ b/examples/index.js @@ -8,6 +8,7 @@ import Drawer from 'ant-design-vue/drawer'; import Affix from 'ant-design-vue/affix'; import Alert from 'ant-design-vue/alert'; import Divider from 'ant-design-vue/divider'; +import Anchor from 'ant-design-vue/anchor'; import ConfigProvider from 'ant-design-vue/config-provider'; import Result from 'ant-design-vue/result'; import Spin from 'ant-design-vue/spin'; @@ -25,6 +26,7 @@ createApp(App) .use(Alert) .use(Divider) .use(Result) + .use(Anchor) .use(Spin) .use(Empty) .use(Timeline)