github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update affix ts type

pull/5387/head
tangjinzhou 2022-03-23 10:02:24 +08:00
parent 5d9afb7d1c
commit 5724c84fe7
1 changed files with 32 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
components/affix/index.tsx
View File

@ -1,4 +1,4 @@
import type { CSSProperties, ExtractPropTypes } from 'vue'; import type { ComponentPublicInstance, CSSProperties, ExtractPropTypes, PropType } from 'vue';
import { import {
defineComponent, defineComponent,
ref, ref,
@ -10,7 +10,6 @@ import {
onUnmounted, onUnmounted,
onUpdated, onUpdated,
} from 'vue'; } from 'vue';
import PropTypes from '../_util/vue-types';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import ResizeObserver from '../vc-resize-observer'; import ResizeObserver from '../vc-resize-observer';
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
@ -41,28 +40,41 @@ export interface AffixState {
} }
// Affix // Affix
export const affixProps = { export const affixProps = () => ({
/** /**
* 距离窗口顶部达到指定偏移量后触发 * 距离窗口顶部达到指定偏移量后触发
*/ */
offsetTop: PropTypes.number, offsetTop: Number,
/** 距离窗口底部达到指定偏移量后触发 */ /** 距离窗口底部达到指定偏移量后触发 */
offsetBottom: PropTypes.number, offsetBottom: Number,
/** 固定状态改变时触发的回调函数 */ /** 固定状态改变时触发的回调函数 */
// onChange?: (affixed?: boolean) => void; // onChange?: (affixed?: boolean) => void;
/** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */ /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
target: PropTypes.func.def(getDefaultTarget), target: {
prefixCls: PropTypes.string, type: Function as PropType<() => Window | HTMLElement | null>,
onChange: PropTypes.func, default: getDefaultTarget,
onTestUpdatePosition: PropTypes.func, },
prefixCls: String,
onChange: Function as PropType<AffixEmits['change']>,
onTestUpdatePosition: Function as PropType<AffixEmits['testUpdatePosition']>,
});
export type AffixProps = Partial<ExtractPropTypes<ReturnType<typeof affixProps>>>;
export type AffixEmits = {
change: (lastAffix: boolean) => boolean;
testUpdatePosition: () => boolean;
}; };
export type AffixProps = Partial<ExtractPropTypes<typeof affixProps>>; export type AffixExpose = {
updatePosition: (...args: any[]) => void;
lazyUpdatePosition: (...args: any[]) => void;
};
export type AffixInstance = ComponentPublicInstance<AffixProps, AffixExpose>;
const Affix = defineComponent({ const Affix = defineComponent({
name: 'AAffix', name: 'AAffix',
props: affixProps, props: affixProps(),
emits: ['change', 'testUpdatePosition'],
setup(props, { slots, emit, expose }) { setup(props, { slots, emit, expose }) {
const placeholderNode = ref(); const placeholderNode = ref();
const fixedNode = ref(); const fixedNode = ref();
@ -222,7 +234,14 @@ const Affix = defineComponent({
const className = classNames({ const className = classNames({
[prefixCls.value]: affixStyle, [prefixCls.value]: affixStyle,
}); });
const restProps = omit(props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']); const restProps = omit(props, [
'prefixCls',
'offsetTop',
'offsetBottom',
'target',
'onChange',
'onTestUpdatePosition',
]);
return ( return (
<ResizeObserver onResize={updatePosition}> <ResizeObserver onResize={updatePosition}>
<div {...restProps} style={placeholderStyle} ref={placeholderNode}> <div {...restProps} style={placeholderStyle} ref={placeholderNode}>