feat: update anchor (#2373)

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: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     this.links = [];
@@ -294,7 +297,7 @@ export default {
           <div class={`${prefixCls}-ink`}>
             <span class={inkClass} ref="inkNode" />
           </div>
-          {$slots.default}
+          {$slots.default && $slots.default()}
         </div>
       </div>
     );

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: {
+  setup() {
-    antAnchor: { default: () => ({}) },
+    return {
-    antAnchorContext: { default: () => ({}) },
+      antAnchor: inject('antAnchor', {}),
-    configProvider: { default: () => ConfigConsumerProps },
+      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}
         </a>
-        {$slots.default}
+        {$slots.default && $slots.default()}
       </div>
     );
   },

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) {
+Anchor.install = function(app) {
-  Vue.use(Base);
+  app.component(Anchor.name, Anchor);
-  Vue.component(Anchor.name, Anchor);
+  app.component(Anchor.Link.name, Anchor.Link);
-  Vue.component(Anchor.Link.name, Anchor.Link);
 };
 export { AnchorProps } from './Anchor';
 export { AnchorLinkProps } from './AnchorLink';

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)