tacl-ui

npm i tacl-ui

import {tool, toast, confirm, alert, loading, drag} from 'tacl-ui';
// 或
import TaclUI from 'tacl-ui';
// TaclUI = {tool, toast, confirm, alert, loading, drag}

// do something ...

<script src="https://cdn.jsdelivr.net/npm/tacl-ui/taclui.min.js"></script>
<!-- or -->
<!-- <script src="https://cdn.jsdelivr.net/npm/tacl-ui@x.x.x/taclui.min.js"></script> -->
<script>
<script>
    TaclUI.toast('Hello world!')
</script>

// 简单调用
toast(text[, time, position]);
toast('一个提示')

// json调用
toast({
    text: '一个提示',
    // 其他参数
})

// new 方法 tacl中的所有组件默认都是一个实例，可以使用new方法创建新的实例
const close = toast.new(...);

declare interface ToasterOpts {
    text?: string;
    time?: number;
    position?: 'top'|'middle'|'bottom';
    parent?: DomEle;
    onhide?(): void;
    onopen?(): void;
    contentHtml?: boolean;
    showClose?: boolean;
    customClass?: string;
    button?: { // 增加一个小按钮
        text: string;
        onclick(): void;
    }
}

// 简单调用
confirm('是否确认')
confirm('是否确认','确认框')

// json调用
confirm({
    text:'是否确认',
    title:'确认框',
    confirmText:'confirm',
    cancelText:'cancel',
    cancelBtn:false, // 是否需要取消按钮
    theme:'default', // 
}).then((result)=>{
    if (result) {
        
    } else {

    }
})

// new 
confirm.new(...).then((result)=>{})

declare interface ConfirmerOpts {
    text?:string;
    title?:string;
    confirmText?:string;
    cancelText?:string;
    cancelBtn?:boolean;
    closeBtn?:boolean;
    parent?: DomEle;
    theme?: confirmStyle;
    onhide?(): void;
    onopen?(): void;
    customEl?: DomEle;
    customClass?: string;
    contentHtml?: boolean; // default false
    custom?(box: Ele, $: ToolStatic): void;
    type?: confirmType; // default confirmType.confirm
    onGetCloseMethod?(fn: void): void; // 获取关闭的函数 用户 new 创建新的弹出框的时候
    clickConfirmClose?: boolean; // default true
    clickCancelClose?: boolean; // default true
    onconfirm?(): void;
    oncancel?(): void;
}

declare type confirmResultType = 'confirm' | 'cancel' | 'close';

declare type confirmType = 'confirm' | 'alert' | 'pop';

declare type confirmStyle = 'yellow2' | 'yellow' | 'default';

// 简单调用
alert('成功')
alert('成功','成功标题')

// json调用
alert({
    text:'成功',
    title:'成功标题',
    confirmText:'confirm',
    theme:'default', // 
}).then(()=>{

})

// new 
alert.new(...).then((result)=>{})

// 简单调用
pop('是否确认')
pop('是否确认','确认框')

// json调用
pop({
    text:'是否确认',
    title:'确认框',
    confirmText:'confirm',
    cancelText:'cancel',
    cancelBtn:false, // 是否需要取消按钮
    theme:'default', // 
}).then((result)=>{
    if (result) {
        
    } else {

    }
})

// new 
pop.new(...).then((result)=>{})

// 简单调用
loading(text[,time]);
loading();
loading('加载中...');
loading('加载中...', 1000);

loading.close(); // 手动关闭

// json调用
loading({
    text:'成功',
    time:1000
})

const close = loading.new(...);

declare interface LoadingerOpts {
    text?:string;
    time?:number|null;
    parent?: DomEle;
    backgroundOpacity?: number;
    onopen?(): void;
    onhide?(): void;
}

let el = drag({
    el,
    parent,
    enableDrag = true,
    onClick = df,
    onSideChange = df,
    zIndex = 100,
    aside = false,
    preventDefault = true,
    reinitPosition = false,
    margin = 3, // 上右下左 或者只传入一个数字
})

declare interface DragParameters {
    el: Ele|HTMLElement|string;
    parent?: Ele|HTMLElement|string;
    onClick?: (event: Event, endX: number, endY: number) => {};
    onSideChange?: (isLeft:boolean) => {};
    zIndex?: number;
    enableDrag?:boolean;
    delay?:number;
    aside?:boolean;
    preventDefault?:boolean;
    reinitPosition?:boolean;
    margin?:number|Array<number>;
    onDragStart?: (event: Event, x: number, y: number) => {};
    onDragMove?: (event: Event, x: number, y: number) => {};
    onDragEnd?: (event: Event, x: number, y: number) => {};
}

declare class Drag {
    constructor(parameters: DragParameters);
    setPosition(left: number, top: number): void;
    initPosition(): void;
    getParentSize(): {width: number, height: number};
    aside: boolean;
    sideLeft: boolean;
    enableDrag: boolean;
    preventDefault: boolean;
    left: number|string;
    top: number|string;
    margin: Array<number>;
}