Dialog组件使用文档

在项目中引入

var dialog = require('components/Dialog');

alert

默认一个提示按钮，有两个参数，第一个参数设置弹窗内容，第二个参数为配置选项，可以自定义按钮的文案，触发事件等。

默认方式

dialog.alert('这是一个alert弹窗。');

自定义方式

dialog.alert('这是一个自定义弹窗', {
    btns: [{
        id: 'test',
        text: '自定义按钮',
        click: function() {
            this.close();
            console.log('xxxxx');
        }
    }]
})

alert方法只能添加一个按钮。

在模式设置中，设置了this.resolve()，因此可以使用then方法，用来执行点击按钮之后的方法

dialog.alert('then方法使用demo').then(function() {
    console.log('最近在读一个人的朝圣');
})

confirm两个按钮的弹窗

默认方式有两个按钮，一个确定，一个取消

dialog.confirm('我不知道应该说什么好。');

可以自定义多个按钮

dialog.confirm('多个自定义按钮', {
    btns: [{
            id: 'btn1',
            text: '按钮',
            click: function() {
                this.close();
                this.resolve();
                console.log('这是第一个自定义的按钮');
            }
        }, {
            id: 'btn2',
            text: '牛按',
            click: function() {
                this.close();
                this.reject();
                console.log('弹窗被关闭了');
            }
        }
    ]
})

也可以定义更多按钮，但是由于布局的关系，一般只定义两个即可。

可以使用then方法来设置点击按钮之后需要做的事情

dialog.confirm('这是一段提示文字.').then(function() {
    console.log('点击确定按钮，我会被log出来.');
}, function() {
    console.log('如果我猜的没错，你点击了取消按钮.');
})

yangbo5207 / everyday

Dialog组件使用文档 #55

在项目中引入

alert

confirm两个按钮的弹窗