mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
72 lines (71 loc) • 2.19 kB
TypeScript
import { Props, ListDataItem, AngleToCursorItem, Point, RotateShare, USEHandler, USEMove, USEResize, USEScale } from './types';
import { Ref, ComputedRef } from 'vue';
/**
* 操作
*/
export declare const useHandler: ({ emit, listModel, currentModel }: USEHandler.Option) => {
listData: Ref<{
rect: {
w: number;
h: number;
x: number;
y: number;
r: number;
};
url: string;
}[], ListDataItem[] | {
rect: {
w: number;
h: number;
x: number;
y: number;
r: number;
};
url: string;
}[]>;
angleToCursor: readonly AngleToCursorItem[];
getCursor: ComputedRef<(i: number) => string>;
onDelete: () => void;
onClick: (index: number) => void;
getCurItem: ComputedRef<{
w: number;
h: number;
x: number;
y: number;
r: number;
}>;
onEmitChange: (type: string) => void;
onUpdate: () => void;
};
/**
* 移动
*/
export declare const useMove: ({ listData, getCurItem, onEmitChange, onUpdate, currentModel }: USEMove.Option) => {
onTouchstart: (e: TouchEvent) => void;
onTouchmove: (e: TouchEvent) => void;
onMousedown: (e: MouseEvent) => void;
};
/**
* 调整大小
*/
export declare const useResize: ({ listData, getCurItem, onEmitChange, onUpdate, currentModel }: USEResize.Option) => {
dragRef: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
onResizeTouchstart: (e: TouchEvent) => void;
onResizeTouchmove: (e: TouchEvent, item: AngleToCursorItem) => void;
onResizeMousedown: (e: MouseEvent, item: AngleToCursorItem) => void;
getCenterPoint: () => Point;
};
/**
* 旋转
*/
export declare const useRotate: (props: Readonly<Required<Props>>, share: RotateShare) => {
onRotateTouchmove: (e: TouchEvent) => void;
onRotateMousedown: () => void;
};
/**
* 双指缩放
*/
export declare const useScale: ({ props, listData, getCurItem, onEmitChange, onUpdate, currentModel }: USEScale.Option) => {
onTouchstartWrap: (e: TouchEvent) => void;
onTouchmoveWrap: (e: TouchEvent) => void;
};