From 2a536380bcaa2553e6528ac59d8fca061581ac89 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Fri, 25 Feb 2022 16:33:05 +0800 Subject: [PATCH] feat(anchor): ts type --- components/anchor/Anchor.tsx | 38 +++++++++---------- components/anchor/style/index.less | 3 ++ .../anchor/style/{index.ts => index.tsx} | 0 3 files changed, 21 insertions(+), 20 deletions(-) rename components/anchor/style/{index.ts => index.tsx} (100%) diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 4a60eb3d4..879bd1f2b 100644 --- a/components/anchor/Anchor.tsx +++ b/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 = { - prefixCls: PropTypes.string, - offsetTop: PropTypes.number, - bounds: PropTypes.number, - affix: PropTypes.looseBool.def(true), - showInkInFixed: PropTypes.looseBool.def(false), - getContainer: PropTypes.func.def(getDefaultContainer), - wrapperClass: PropTypes.string, - wrapperStyle: PropTypes.style, - getCurrentAnchor: PropTypes.func, - targetOffset: PropTypes.number, - onChange: PropTypes.func, - onClick: PropTypes.func, -}; +export const anchorProps = () => ({ + prefixCls: String, + offsetTop: Number, + bounds: Number, + affix: { type: Boolean, default: true }, + showInkInFixed: { type: Boolean, default: false }, + getContainer: Function as PropType<() => AnchorContainer>, + wrapperClass: String, + wrapperStyle: { type: Object as PropType, default: undefined as CSSProperties }, + getCurrentAnchor: Function as PropType<() => string>, + targetOffset: Number, + onChange: Function as PropType<(currentActiveLink: string) => void>, + onClick: Function as PropType<(e: MouseEvent, link: { title: any; href: string }) => void>, +}); -export type AnchorProps = Partial>; +export type AnchorProps = Partial>>; export interface AnchorState { scrollContainer: HTMLElement | Window; @@ -76,8 +75,7 @@ export interface AnchorState { export default defineComponent({ name: 'AAnchor', inheritAttrs: false, - props: anchorProps, - emits: ['change', 'click'], + props: anchorProps(), setup(props, { emit, attrs, slots, expose }) { const { prefixCls, getTargetContainer, direction } = useConfigInject('anchor', props); const inkNodeRef = ref(); diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 31ef624d9..179501644 100644 --- a/components/anchor/style/index.less +++ b/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; } diff --git a/components/anchor/style/index.ts b/components/anchor/style/index.tsx similarity index 100% rename from components/anchor/style/index.ts rename to components/anchor/style/index.tsx