ucc-utils
Version:
286 lines (274 loc) • 8.58 kB
TypeScript
import { DebounceSettings, DebouncedFunc } from 'lodash-es';
import * as vue from 'vue';
import { Ref, Component, ComputedRef, ShallowRef } from 'vue';
/**
* 拖拽选中效果
*/
declare const useDragSelect: () => {};
/**
* 获取下一个ID
* @author Yuluo
* @link https://github.com/YuluoY
* @date 2024-10-05
* @param {object} opts
* @param {boolean} [opts.isOrderly=true] 是否有序id
* @returns {string}
* @example
* ```ts
* useNextId() // '1'
* useNextId({ isOrderly: false }) // '0x1g4k'
* ```
*/
declare const useNextId: (opts?: {
isOrderly?: boolean;
}) => string;
interface URootFontSizeOptions {
rootFontSize?: number;
isResize?: boolean;
resizeTimeout?: number;
immediate?: boolean;
debounceOpt?: DebounceSettings;
afterRefreshCallback?: (rootFontSize: number | undefined) => void;
beforeRefreshCallback?: (rootFontSize: number | undefined) => void;
}
interface URootFontSizeReturn {
rootFontSize?: number;
destory: () => void;
refreshRootFontSize: () => void;
refreshRootFontSizeDebounce?: DebouncedFunc<() => void>;
setRootFontSize: (rootFontSize: number) => void;
}
/**
* 处理根字体大小 rem 响应式布局
* @author Yuluo
* @link https://github.com/YuluoY
* @date 2024-08-24
* @param {URootFontSizeOptions} options 配置项
* @param {number} [options.rootFontSize=16] 根字体大小
* @param {number} [options.resizeTimeout=300] resize事件防抖时间, 默认300ms
* @param {boolean} [options.isResize=true] 是否开启resize事件, 默认true
* @param {boolean} [options.immediate=false] 是否立即执行, 默认false
* @param {(val:number) => void} [options.beforeRefreshCallback] 在resize刷新字体大小前执行的回调函数
* @param {(val:number) => void} [options.afterRefreshCallback] 在resize刷新字体大小后执行的回调函数
* @param {DebounceSettings} [options.debounceOpt] lodash防抖配置, 默认{}
* @returns {URootFontSizeReturn}
* @example
* ```js
* const {
* destory, // 销毁resize事件
* rootFontSize, // 根字体大小
* refreshRootFontSize, // 刷新根字体大小函数
* refreshRootFontSizeDebounce, // lodash的防抖函数
* } = useRootFontSize({
* setRootFontSizeCallback: (rootFontSize) => {
* console.log(rootFontSize)
* },
* immediate: true,
* isResize: true,
* resizeTimeout: 300,
* debounceOpt: {
* // lodash防抖配置
* }
* })
* ```
*/
declare const useRootFontSize: (options: URootFontSizeOptions) => URootFontSizeReturn;
interface EventOptions extends AddEventListenerOptions {
debounce?: number;
throttle?: number;
immediate?: boolean;
}
type TargetType = EventTarget | (() => EventTarget) | Ref<EventTarget>;
type CleanupFn = () => void;
/**
* 使用addEventListener监听事件，仅在vue3中使用
* @author Yuluo
* @link https://github.com/YuluoY
* @date 2025-02-11
* @param target 监听目标（DOM元素或返回DOM元素的函数）
* @param event 事件名称
* @param callback 事件处理函数
* @param options 配置选项（包括防抖、节流等）
* @returns 清理函数，用于手动移除事件监听
* @example
* ```ts
* const cleanup = useEventListener(document.querySelector('#app'), 'click', () => {
* console.log('clicked')
* })
* // 使用ref
* const ref = ref(document.querySelector('#app'))
* const cleanup = useEventListener(ref, 'click', () => {
* console.log('clicked')
* })
*
* // 使用函数
* const cleanup = useEventListener(() => document.querySelector('#app'), 'click', () => {
* console.log('clicked')
* })
*
* * // 在需要时手动清理
* cleanup()
*
* ```
*/
declare function useEventListener(target: TargetType, event: keyof WindowEventMap, callback: EventListener, options?: EventOptions): CleanupFn;
interface UseMonitDomOptions extends IntersectionObserverInit {
/**
* 是否保持观察
*/
isKeep?: boolean;
/**
* 是否立即执行
*/
isImmediate?: boolean;
/**
* 防抖时间
*/
debounceTime?: number;
/**
* 进入视口回调
*/
onIntersect?: (entry: IntersectionObserverEntry, value: number) => void;
}
interface UseWaterfallOptions extends UseMonitDomOptions {
/**
* 占位图片
*/
placeholderImg?: string | string[];
/**
* 列数
*/
column: number;
/**
* 列间距
*/
gap?: number;
/**
* 默认加载行
*/
defaultRow?: number;
/**
* 是否懒加载
*/
isLazy?: boolean;
/**
* 是否自动懒加载
*/
isAuto?: boolean;
/**
* 是否监听窗口大小变化
*/
isResize?: boolean;
/**
* 图片类名
*/
imgClass?: string;
/**
* 外边距
*/
margin?: number;
/**
* 单位
*/
unit?: 'px' | 'rem' | 'vw' | 'vh' | 'em';
/**
* 像素转换
*/
onPixelTrans?: (pixel: number) => number;
/**
* 加载回调
*/
onLoading?: () => void;
/**
* 加载条件
*/
loadCondition?: (entry: IntersectionObserverEntry, value: number) => boolean;
}
interface UseWaterfallReturn {
Waterfall: Component;
isLoading: Ref<boolean>;
startIndex: Ref<number>;
endIndex: Ref<number>;
rowIndex: Ref<number>;
colsHeight: Ref<number[]>;
colMaxHeight: ComputedRef<number>;
waterfallItemWidth: ComputedRef<number>;
waterfallImages: ShallowRef<HTMLImageElement[]>;
waterfallItems: ShallowRef<HTMLElement[]>;
}
/**
* 瀑布流布局
* @param data 数据
* @param options 配置
* @returns 瀑布流布局
* @example
* ```vue
* <template>
* <Waterfall>
* <template #default="{ item, index, styles, classname, isLoading }">
* <div :style="styles" :class="classname">
* <img :src="item.img" alt="item.title" />
* </div>
* </template>
* </Waterfall>
* </template>
* ```
* ```ts
* const { Waterfall, isLoading, startIndex, endIndex, rowIndex, colsHeight, colMaxHeight, waterfallItemWidth, waterfallImages, waterfallItems } = useWaterfall(data, options)
* ```
*/
declare const useWaterfall: <T extends {
[key: string]: any;
img: string;
title: string;
desc: string;
id: any;
}[]>(data: T, options: UseWaterfallOptions) => UseWaterfallReturn;
/**
* @author Yuluo
* @link https://github.com/YuluoY
* @date 2025-09-27
* @param target 初始值
* @param change 变化回调
* @returns 状态和设置状态函数
* @example
* ```ts
* const [state, setState] = useState('hello')
* setState('world')
* console.log(state.value) // 'world'
*
* const [state, setState] = useState(() => 'hello')
* setState(_ => 'world')
* ```
*/
declare const useState: <T>(target: T, change?: (newState: T) => void) => readonly [ShallowRef<T>, (newState: T) => void];
/**
* @author Yuluo
* @link https://github.com/YuluoY
* @date 2025-09-28
* @param value 初始值
* @param delay 延迟时间
* @param options lodash debounce配置
* @returns ref对象
* @example
* ```ts
* const debouncedRef = useDebouncedRef('hello', 1000, { leading: true })
* debouncedRef.value = 'world'
* console.log(debouncedRef.value) // 'hello'
* setTimeout(() => {
* console.log(debouncedRef.value) // 'world'
* }, 1000)
* ```
*/
declare function useDebouncedRef<T>(value: T, delay?: number, options?: DebounceSettings): vue.Ref<T, T>;
declare const hooks_useDebouncedRef: typeof useDebouncedRef;
declare const hooks_useDragSelect: typeof useDragSelect;
declare const hooks_useEventListener: typeof useEventListener;
declare const hooks_useNextId: typeof useNextId;
declare const hooks_useRootFontSize: typeof useRootFontSize;
declare const hooks_useState: typeof useState;
declare const hooks_useWaterfall: typeof useWaterfall;
declare namespace hooks {
export { hooks_useDebouncedRef as useDebouncedRef, hooks_useDragSelect as useDragSelect, hooks_useEventListener as useEventListener, hooks_useNextId as useNextId, hooks_useRootFontSize as useRootFontSize, hooks_useState as useState, hooks_useWaterfall as useWaterfall };
}
export { useRootFontSize as a, useNextId as b, useEventListener as c, useWaterfall as d, useState as e, useDebouncedRef as f, hooks as h, useDragSelect as u };