yanyan-ui

import type {formatDateNum, MessageTypes, dataType, deepLookupData} from './types/tools' import type {MessageBoxState} from "element-plus"; import type {VNode } from "vue" import type { animationItem, animationCriticalItem, rangeTargetID, framesConfig, animationRangeItem, TimingType, animationItemSet, numberAnimationType } from "./types/animationType/pageAnimation" /** * 安装插件到Vue应用中 * @param app Vue应用实例 */ export declare const install: (app: import("vue").App<any>) => void; /**工具类集合*/ export declare const Tools: { /** * 转换时间格式 * @param format 时间格式 * @param date 时间 formatDate对象 | Date对象 | 时间戳 * @returns 返回一个字符串，格式为对应的时间格式 * @example Tools.convertTimeFormat('YYYY-MM-DD HH:mm:ss',new Date()) * */ convertTimeFormat(format: string, date: formatDateNum | Date | number):string; /** * 根据模板直接转换日期格式 * @param date 日期字符串年月日之间必须有任意非数字分隔符 * @param targetFormat 目标的日期格式 * @returns 返回一个字符串，格式为targetFormat的日期格式 * @example Tools.convertDateFormatByTemplate('2021-01-01','YYYY年MM月DD日') * */ convertDateFormatByTemplate(date: string, targetFormat: string):string; /** * 数组分类函数 * @param array 需要分类的数组 * @param rules 分类规则 * @returns 返回一个对象，包含分类后的数组 */ groupBy(array: object[], rules: string | Function):object | { true: [], false: [] }; /** * 深拷贝 * @param data 需要拷贝的元素 * @returns 深拷贝后的元素 */ deepCopy(data:any):any; /** * 更具key数组去重 * @param array 需要去重的数组 * @param key 去重的key * @returns {Array<any>} */ accordingToKeyUnique(array: Array<any>, key?: string):Array<any>; /** * 防抖函数 * @param fn 需要防抖的函数 * @param delay 防抖时间 */ debounce(fn: Function, delay: number):Function; /** * base64转file * @param urlData base64数据 * @param fileName 文件名 * @returns {File}返回一个file对象 */ // @ts-ignore base64ToFile(urlData: string, fileName: string):File; /** * file转base64 * @param file file对象 * @param callBack 回调函数 */ fileToBase64(file:File,callBack:(baseStr:any)=>void):void; /** * 显示消息框 * @param type 消息类型（success / info / warning / error） * @param message 消息内容 * @param offset 消息框距离窗口顶部的偏移量 * @param duration 显示时间, 毫秒。设为 0 则不会自动关闭 * @param grouping 合并内容相同的消息，不支持 VNode 类型的消息 * @param dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 */ showMsg( type: MessageTypes, message: string | VNode, offset: number = 60, duration: number = 3000, grouping: boolean = true, dangerouslyUseHTMLString?: boolean ): void; /** * 显示确认框 * @param message 消息内容 * @param callback 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 * @param title 消息标题 * @param type 消息类型（success / info / warning / error） * @param cancel 在外部自定义捕获异常时的回调 * @param distinguishCancelAndClose 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 Esc 键）进行区分 * @param showCancelButton 是否显示取消按钮 * @param showConfirmButton 是否显示确定按钮 * @param confirmButtonText 确定按钮的文本内容 * @param cancelButtonText 取消按钮的文本内容 */ showConfirm( message: string, callback: Function, title?: string, type?: MessageBoxState["type"], cancel?: Function, distinguishCancelAndClose: boolean = false, showCancelButton: boolean = true, showConfirmButton: boolean = true, confirmButtonText: string = "确定", cancelButtonText: string = "取消" ): void; /** * 消息提示框 * @param message 消息内容 * @param showClose MessageBox 是否显示右上角关闭按钮 * @param title 消息标题 * @param type 消息类型（success / info / warning / error） * @param distinguishCancelAndClose 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 Esc 键）进行区分 * @param showCancelButton 是否显示取消按钮 * @param showConfirmButton 是否显示确定按钮 * @param confirmButtonText 确定按钮的文本内容 * @param cancelButtonText 取消按钮的文本内容 * @param callback 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 * @param cancel 在外部自定义捕获异常时的回调 */ showAlert( message: string, showClose: boolean = true, title: string = "提示", type: MessageBoxState["type"] = "error", distinguishCancelAndClose: boolean = false, showCancelButton: boolean = false, showConfirmButton: boolean = false, confirmButtonText: string = "确定", cancelButtonText: string = "取消", callback: Function, cancel?: Function, ):void; /** * 获取数据类型 * @param sourceData 源数据 */ getType(sourceData: T): dataType; /** * 列表各项添加深度和位置信息 * @param targetList 目标列表 * @param indentStep 深度步进值 * @param initialIndentValue 初始深度值 * @param currentPos 第一项位置的初始值 * @returns 处理后的列表和下一个位置 */ calculateItemDepth( targetList: object[], indentStep?: number = 1, initialIndentValue?: number = 0, currentPos?: number = 0 ):{ nextPos: number; updatedList: { [p: string]: any; indentValue: number; children?: any[]; listPosition: number }[] } /** * 深度搜索 * @param dataList 目标数组 * @param findRules 查找规则 * @returns返回一个数组，包含查找到的元素 */ deepLookup (dataList: Array<deepLookupData>, findRules: (item:deepLookupData)=>Boolean): deepLookupData[]; /** * 节流函数 * @param fn 需要节流的函数 * @param delay 节流时间 */ throttle(fn:Function, delay:number):Function; /** * 复制文本 * @param text 文本 * @param ifShowMsg 是否显示消息 * @returns {Promise<{code:number,message:string}>}返回一个Promise对象 code=200成功，code=100失败 */ copyText(text:string,ifShowMsg?:Boolean): Promise<{code:number,message:string}> /** * 改变颜色 * @param colorValue 16进制颜色值或 rgb() 或 rgba() * @param degree 改变的程度,负数加深颜色/透明度变小；正数颜色变浅/透明度变大 * @param originally 返回结果和原本类型一致,false时输出16进制颜色值 * @returns 返回改变后的颜色值 */ changeColor(colorValue: string, degree: number, originally: boolean = true):string; /** * 区间随机整数 * @param min 最小值 * @param max 最大值 * @returns {number}返回一个随机整数 */ randomInterval(min,max): number; /** * 设置 CSS 变量的值 * @param cssVarName CSS 变量名 * @param value CSS 变量值 * */ setCssVar(cssVarName: string, value: string):void /** * 获取 CSS 变量的值 * @param cssVarName CSS 变量名 * @returns {string}返回 CSS 变量值 * */ getCssVar(cssVarName: string):string }; /**动画类集合*/ export declare const AnimationUtils: { /** * 动画监听器-执行动画 * @param observerId 需要进行监听交叉操作的元素ID * @param elementIDList 所有需要操作的元素id * @param currentPlatingElement 当前页面的id和根元素id(app) * @param animationList 需要操作的元素的配置 * @param animationCriticalList 需要操作的元素的临界值配置 */ animationObserver( observerId: string, elementIDList: string[], currentPlatingElement: rangeTargetID, animationList: animationItem[], animationCriticalList?: animationCriticalItem[] ): void; /** * 生成animationList的config * @param animationList 动画配置列表 -- 均匀变化 * @param framesConfigs 动画帧配置列表 * @param animationRange 动画帧范围 * @return 完善后的动画配置列表 */ setAnimationListConfig( animationList: animationItemSet[], framesConfigs: framesConfig, animationRange: animationRangeItem ): animationItem[]; /** * svg动画 * @param time 动画时间 * @param timingFunction 动画时间函数 * @param lineClassName 类名 * @param color 颜色 * @param strokeWidth 线宽 * @param strokeLinecap 线头样式 * @param fill 填充 */ svgAnimation( time: number = 2, timingFunction:TimingType='ease', lineClassName: string = ".svgLine", color: string = "#000", strokeWidth: string = "5", strokeLinecap: string = "round", fill: string = "none" ):void; /** * 数字动画函数 * @param duration 动画持续时间 ms * @param from 起始值 * @param to 结束值 * @param callback 回调函数 * @param animationType 动画类型 */ numberAnimate( duration: number, from: number, to: number, callback: (value: number) => void, animationType?: numberAnimationType ): void }; /**表示图形的总类-用于自定义图形时继承此类。*/ export declare class Graph{ protected _color: string; private _startX: number; private _startY: number; private _endX: number; private _endY: number; protected _ctx: CanvasRenderingContext2D; private readonly _vasWidth: number; private readonly _vasHeight: number; protected _dpi: number; /** * 构造函数 - 创建一个图形。 * @param color - 图形的颜色。 * @param startX - 起始的 X 坐标。 * @param startY - 起始的 Y 坐标。 * @param ctx - 绘图上下文。 * @param width - 画布的宽度。 * @param height - 画布的高度。 * @param dpi - DPI 缩放系数。 */ constructor( color:string, startX:number, startY:number, ctx:CanvasRenderingContext2D, width:number, height:number, dpi:number ); /** * 设置终止的 X 坐标。 * @param value - 新的终止 X 坐标。 */ endX(value:number):void; /** * 设置终止的 Y 坐标。 * @param value - 新的终止 Y 坐标。 */ endY(value:number):void; //最小X坐标 minX:number; //最大X坐标 maxX:number; //最小Y坐标 minY:number; //最大Y坐标 maxY:number; } /**绘制对象.*/ // DrawGraph.d.ts export declare class DrawGraph { /** * 构造函数 - 创建一个绘图对象。 * @param canvas - 画布元素。 * @param ctx - 画布上下文。 */ constructor( canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D ); /** * 初始化绘图 * @param width - 画布宽度 * @param height - 画布高度 * @param canvasBG - 画布背景颜色 * @param graphColor - 图形颜色 */ init(width: number, height: number, canvasBG: string, graphColor: string): void; /** * 修改画布背景颜色 * @param canvasBG - 画布背景颜色 * */ changeCanvasBG(canvasBG:string):void /** * 销毁绘图 */ destruction(): void; /** * 设置自定义图形 * @param customShape - 自定义图形 */ setShape(customShape: Object): void; /** * 设置当前图形 * @param currentGraph - 当前图形 */ setCurrentGraph(currentGraph: string): void; /** * 改变填充颜色 * @param graphColor - 填充颜色 */ changeGraphColor(graphColor: string): void; /** * 下载canvas * */ downloadCanvas():void }