dxy-dialog

dxy-dialog

丁香园前端对话框组件

Demo

DXY Dialog Demo

使用方法

1. 使用 npm 安装

安装

$ npm install dxy-dialog --save

使用

JS:

var dxy_dialog = require('dxy-dialog');
dxy_dialog.show({
    title: {
        txt: '标题',
        align: 'center',
        fontSize: '20px',
        color: '#167ce7',
        style: {'fontWeight': 400, 'textDecoration': 'underline'},
    },
    msg: '消息消息消息消息消息消息',
    width: '400px',
    buttons: [
        {
            text: '按钮1',
            cls: 'myBtn1',
            handler: function () {
                dxy_dialog.hide();
                alert('点击了按钮1');
            }
        },
        {
            text: '按钮2',
            cls: 'myBtn2',
            handler: function () {
                dxy_dialog.hide();
                alert('点击了按钮2');
            }
        }
    ],
    buttonsAlign: 'center',
    modal: true,
    opacity: 0.5,
    closable: true,
    cls: 'myDialog',
    onClose: function () {
        alert('弹窗关闭');
    },
    mainColor: '#fff',
    secondColor: '#1976D2'
});

CSS:

@import "dxy-dialog/dist/dxy-dialog.min.css";

2. 通过 <script> 直接引用

引用

<link rel="stylesheet" href="dxy-dialog.min.css">
<!--...-->
<script src="jquery.js"></script>
<script src="dxy-dialog.min.js"></script>

使用

var dialog = new dxy_dialog();    // 此时 dxy_dialog 为全局变量
dxy_dialog.show({
    title: {
        txt: '标题',
        align: 'center',
        fontSize: '20px',
        color: '#167ce7',
        style: {'fontWeight': 400, 'textDecoration': 'underline'},
    },
    msg: '消息消息消息消息消息消息',
    width: '400px',
    buttons: [
        {
            text: '按钮1',
            cls: 'myBtn1',
            handler: function () {
                dxy_dialog.hide();
                alert('点击了按钮1');
            }
        },
        {
            text: '按钮2',
            cls: 'myBtn2',
            handler: function () {
                dxy_dialog.hide();
                alert('点击了按钮2');
            }
        }
    ],
    buttonsAlign: 'center',
    modal: true,
    opacity: 0.5,
    closable: true,
    cls: 'myDialog',
    onClose: function () {
        alert('弹窗关闭');
    },
    mainColor: '#fff',
    secondColor: '#1976D2'
});

API

dialog.show(options);    // 显示
dialog.hide();           // 隐藏

options:

• title: String, 可选, 对话框各项配置

  • txt: String, 可选, 对话框标题,此项不选,其余项无效

  • align: String, 可选, 对话框标题位置,默认居中,对应text-align属性

  • color: String, 可选, 对话框标题颜色

  • fontSize: String, 可选, 对话框标题字体大小

  • style: Object, 可选, 自定义的style

• msg: String, 可选, 对话框内容

• width: String, 可选, 对话框宽度, 默认350px

• buttons: Array, 可选, 对话框按钮, 数组元素为对象

  • text: String, 可选, 按钮文字

  • cls: String, 可选, 自定义按钮的class

  • handler: Object, 可选, 点击按钮回调函数

• buttonsAlign: String, 可选, 按钮组位置,默认居中, 对应text-align属性

• modal: Boolean, 可选, 显示遮罩层, 默认为true

• opacity: Number, 可选, 遮罩层透明度, 默认为0.5

• closable: Boolean, 可选, 显示关闭按钮, 默认为true

• cls: String, 可选, 自定义对话框的class

• onClose: Object, 可选, 对话框关闭回调函数

• mainColor: String, 对话框主色(背景)

• secondColor: String, 对话框副色(边框、按钮颜色)