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)