ucc-ui/dist/types/hooks/useResize.d.ts

ucc-ui components library

import { Ref } from 'vue';
interface UseResizeOptions {
    el: string | HTMLElement | Ref<HTMLElement | null>;
    angleWidth?: number;
    barSize?: number;
    barZIndex?: number;
    minHeight?: number;
    minWidth?: number;
    resizing?: (width: number, height: number) => void;
    end?: (width: number, height: number) => void;
}
type ResizeType = typeof ResizeClasses[keyof typeof ResizeClasses];
interface UseResizeReturn {
    width: Readonly<Ref<number>>;
    height: Readonly<Ref<number>>;
    left: Readonly<Ref<number>>;
    top: Readonly<Ref<number>>;
    startX: Readonly<Ref<number>>;
    startY: Readonly<Ref<number>>;
    startWidth: Readonly<Ref<number>>;
    startHeight: Readonly<Ref<number>>;
    resizeType: Readonly<Ref<ResizeType>>;
}
declare const ResizeClasses: {
    [key: string]: string;
};
/**
 *
 * @param opts
 * @param opts.el 需要调整大小的元素
 * @param opts.angleWidth 对角控制条的宽度
 * @param opts.barSize 控制条的大小
 * @param opts.barZIndex 控制条的z-index
 * @param opts.minWidth 最小宽度
 * @param opts.minHeight 最小高度
 * @param opts.resizing 调整大小时触发的事件
 * @param opts.end 调整大小时触发的事件
 * @description 用于调整元素的大小
 * @example
 * ```ts
 * const { width, height, left, top, startX, startY, startWidth, startHeight, resizeType } = useResize({
 *   el: '#app',
 * })
 * ```
 *
 * @returns
 */
export default function useResize(opts: UseResizeOptions): UseResizeReturn;
export {};