Yao b8930d972a
[refactor] Dialog: 升级为自定义组件 (#184)
* 封装 doc-page, 方便写文档

* add pop manager

* popup upgrade

* 更新 README

* add empty line

* delete empty css

* dialog init

* dialog

* dialog upgrade

* 修复 helper 里的样式问题

* dialog 文档

* 修复 button 奇怪的边框问题

* 缩进处理
2018-04-07 22:28:23 +08:00

71 lines
1.6 KiB
JavaScript

const Dialog = require('../../dist/dialog/dialog');
Page({
toggleBaseDialog() {
Dialog({
title: '弹窗',
message: '这是一个模态弹窗',
selector: '#zan-base-dialog',
showCancelButton: true
}).then(() => {
console.log('=== dialog resolve ===', 'type: confirm');
}).catch(() => {
console.log('=== dialog reject ===', 'type: cancel');
});
},
toggleWithoutTitleDialog() {
Dialog({
message: '这是一个模态弹窗',
selector: '#zan-no-title-dialog'
}).then(() => {
console.log('=== dialog ===', 'type: confirm');
});
},
toggleButtonDialog() {
Dialog({
title: '弹窗',
message: '这是一个模态弹窗',
selector: '#zan-button-dialog',
buttons: [{
text: '现金支付',
color: 'red',
type: 'cash'
}, {
text: '微信支付',
color: '#3CC51F',
type: 'wechat'
}, {
text: '取消',
type: 'cancel'
}]
}).then(({ type }) => {
console.log('=== dialog with custom buttons ===', `type: ${type}`);
});
},
toggleVerticalDialog() {
Dialog({
title: '弹窗',
message: '这是一个模态弹窗',
selector: '#zan-vertical-dialog',
buttonsShowVertical: true,
buttons: [{
text: '现金支付',
color: 'red',
type: 'cash'
}, {
text: '微信支付',
color: '#3CC51F',
type: 'wechat'
}, {
text: '取消',
type: 'cancel'
}]
}).then(({ type }) => {
console.log('=== dialog with vertical buttons ===', `type: ${type}`);
});
}
});