dialog自定义对话框

多功能弹出对话框小插件

1.0.2 修复两种默认主题文本过多显示异常问题

1.0.1 更新md文档说明问题

####安装方法

/* 安装npm */
npm install custom-dialog --save

方法一览

• customs (自定义对话框)
• confirm (弹出确定取消框)
• alert (弹出确认框)

代码示例参数说明

初始化方法示例

//引入文件
import Modal from 'custom-dialog' ;
//调用初始化方法
let dialog = new Modal( {
    theme : '1',
    clickMaskCloseWindow: true,
    isOpenAnimation: false,
    customTheme : {
        mask: 'background:rgba(0,0,0,.5);position:absolute;left:0;top:0;right:0;bottom:0;',
        box: "background: #ffffff;position: absolute;left: 50%;top: 50%;z-index: 1000;color: #808080;margin-top: -25%; margin-left: -40%;padding-top:20px;box-sizing:border-box;width:80%;border-radius:12px;-webkit-transform:scale(.01);transform:scale(.01);",
        header: 'height:30px;color:#000000;font-size:16px;line-height:30px;text-align:center;',
        body: 'width:100%;height:52px;padding-top:10px;box-sizing:border-box;line-height:20px;color:#232323;text-align:center;font-size:13px;padding:5px 25px;',
        footer: 'height:45px;overflow:hidden;color:#0275f6;text-align:center;border-top:1px solid #e2e2e2;box-shadow:0 1px 1px rgba(0,0,0,.02) inset;',
        buttons: [ {
            cancel: 'line-height:45px;display:inline-block;cursor:pointer;width:50%;border-right:1px solid #e2e2e2;box-sizing:border-box;'
        }, {
            ok: 'line-height:45px;display:inline-block;cursor:pointer;width:50%;'
        } ]
    }
} );

// 简单初始化 (使用默认配置)
let dialog = new Modal();

// 简单初始化 （使用ios主题）
let dialog = new Modal({
    theme:2
});

创建对话框基本设置说明 （注意：如果不传入参数则全部使用默认配置！）

| 属性名 | 参数说明 | 值类型 | 是否必须 | 默认值 | | ---------- | -----------| ---------- | ----------- | -----------| | theme | 可选的主题类型,具体设置详见下表 | String & Number | 否 | refreshing | | clickMaskCloseWindow | 点击背景区域是否可以关闭对话框 | Boolean | 否 | false | | isOpenAnimation | 是否开启对话框出现时的动画 | Boolean | 否 | false | | customTheme | 自定义主题的样式(如果设置了自定义主题，则会忽略主题类型的设置),具体设置详见下表 | Object | 否 | null |

theme 可选主题类型：refreshing 1（清爽主题）& iosTheme || 2（仿ios主题）

| 参数值 | 说明 | | ---------- | -----------| | refreshing 或者 1 | 使用清爽主题 | | iosTheme 或者 2 | 使用仿IOS主题 |

customTheme 自定义主题的样式

| 参数值 | 说明 | 值类型 | | ---------- | -----------| -----------| | mask | 遮罩层的样式 | String | | box | 主体内容区域样式 | String | | header | 标题部分样式 | String | | body | 具体内容区样式 | String | | footer | 页脚区域样式 | String | | buttons | 页脚里面按钮的样式(具体参数详见下表 ) | Array |

customTheme.buttons 自定义按钮的样式(可以有多个按钮)，每个按钮为一个对象 ，每个对象的顺序会影响最终渲染时的排列,每个属性名需对应调用时设置buttons属性的值的key一致

确定按钮对象参数值见下表

| 参数值 | 说明 | 值类型 | | ---------- | -----------| -----------| | cancel | 确定按钮样式（默认确定按钮key为cancel） | String |

取消按钮对象参数值见下表

| 参数值 | 说明 | | ---------- | -----------| | ok | 确定按钮样式（默认确定按钮key为ok） |

自定义按钮对象参数值见下表

| 参数值 | 说明 | | ---------- | -----------| | xxx | 确定按钮样式（默认确定按钮key为xxx） |

自定义对话框调用说明

//弹出自定义对话框
dialog.customs( {
    title: '标题',
    content: '你确定这样做吗？',
    hideCloseBtn: false,
    buttons: {
        ok: {
            text: '确定',
            callback: ( el ) => {
                console.log( '确定' );
                return true;
            },
        },
        xxx: {
            text: '查看文章',
            callback: () => {
                console.log( '文章' );
                return true;
            },
        },
        cancel: {
            text: '取消',
        }
    }
} )
//弹出确认取消框
dialog.confirm( {
    title: '请告诉我',
    content: '你是逗比吗？',
    buttons: {
        ok: {
            text : '是' ,
            callback: ( el ) => {
                console.log( '是' );
                return true;
            },
        },
        cancel: {
            text : '不是' ,
        }
    }
} )

//弹出确认框
dialog.alert( {
    content: '你确定这样做吗？',
    buttons: {
        ok(){
            return true;
        },
    }
} )

对话框具体内容参数配置说明(所有对话框基本属性值一样)

| 属性名 | 参数说明 | 值类型 | 是否必须 | 默认值 | | ---------- | -----------| ---------- | ----------- | -----------| | title | 显示在头部的标题（不提供该参数将不会显示头部HTML元素） | String | 否 | null | | content | 显示在内容区的正文 | String | 是 | null | | hideCloseBtn | 是否隐藏取消按钮 | Boolean | 否 | false | | buttons | 按钮事件配置(详细配置见下表) | Object | 是 | null |

-- buttons 按钮对象参数(key,value)配置

| 属性 | 说明 | 值类型 | | ---------- | -----------| -----------| | ok | 确定按钮属性(具体值详见下表，所有属性共有该值，当值为一个方法的时候直接设置为点击该按钮的回调方法,默认文本为‘确定’) | Object & Function | | xxx | 自定义按钮属性 | Object | | cancel | 取消按钮属性(当值为一个方法的时候直接设置为点击该按钮的回调方法,默认文本为‘取消’) | Object & Function |

buttons['ok'] 按钮对象具体属性值(注意：确定按钮需return true 可关闭对话框，或者手动removeChild )

| 属性 | 说明 | 值类型 | 默认值 | 是否携带参数 | | ---------- | -----------| -----------| -----------| -----------| | text | 按钮显示文本 | String | 确定 | | callback | 点击该按钮执行的方法 | Function | null | element（对话框的最外层的DOM节点） |

alert 弹出确认框应该只有一个确认按钮