feat(anchor): ts type

components/anchor/Anchor.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import {
   defineComponent,
   nextTick,
@@ -9,7 +9,6 @@ import {
   ref,
   computed,
 } from 'vue';
-import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import addEventListener from '../vc-util/Dom/addEventListener';
 import Affix from '../affix';
@@ -40,7 +39,7 @@ function getOffsetTop(element: HTMLElement, container: AnchorContainer): number
   return rect.top;
 }
 
-const sharpMatcherRegx = /#(\S+)$/;
+const sharpMatcherRegx = /#([\S ]+)$/;
 
 type Section = {
   link: string;
@@ -49,22 +48,22 @@ type Section = {
 
 export type AnchorContainer = HTMLElement | Window;
 
-const anchorProps = {
+export const anchorProps = () => ({
-  prefixCls: PropTypes.string,
+  prefixCls: String,
-  offsetTop: PropTypes.number,
+  offsetTop: Number,
-  bounds: PropTypes.number,
+  bounds: Number,
-  affix: PropTypes.looseBool.def(true),
+  affix: { type: Boolean, default: true },
-  showInkInFixed: PropTypes.looseBool.def(false),
+  showInkInFixed: { type: Boolean, default: false },
-  getContainer: PropTypes.func.def(getDefaultContainer),
+  getContainer: Function as PropType<() => AnchorContainer>,
-  wrapperClass: PropTypes.string,
+  wrapperClass: String,
-  wrapperStyle: PropTypes.style,
+  wrapperStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-  getCurrentAnchor: PropTypes.func,
+  getCurrentAnchor: Function as PropType<() => string>,
-  targetOffset: PropTypes.number,
+  targetOffset: Number,
-  onChange: PropTypes.func,
+  onChange: Function as PropType<(currentActiveLink: string) => void>,
-  onClick: PropTypes.func,
+  onClick: Function as PropType<(e: MouseEvent, link: { title: any; href: string }) => void>,
-};
+});
 
-export type AnchorProps = Partial<ExtractPropTypes<typeof anchorProps>>;
+export type AnchorProps = Partial<ExtractPropTypes<ReturnType<typeof anchorProps>>>;
 
 export interface AnchorState {
   scrollContainer: HTMLElement | Window;
@@ -76,8 +75,7 @@ export interface AnchorState {
 export default defineComponent({
   name: 'AAnchor',
   inheritAttrs: false,
-  props: anchorProps,
+  props: anchorProps(),
-  emits: ['change', 'click'],
   setup(props, { emit, attrs, slots, expose }) {
     const { prefixCls, getTargetContainer, direction } = useConfigInject('anchor', props);
     const inkNodeRef = ref();

components/anchor/style/index.less

@@ -21,6 +21,7 @@
     top: 0;
     left: 0;
     height: 100%;
+
     &::before {
       position: relative;
       display: block;
@@ -30,6 +31,7 @@
       background-color: @anchor-border-color;
       content: ' ';
     }
+
     &-ball {
       position: absolute;
       left: 50%;
@@ -41,6 +43,7 @@
       border-radius: 8px;
       transform: translateX(-50%);
       transition: top 0.3s ease-in-out;
+
       &.visible {
         display: inline-block;
       }