API 文档 - Dialog（弹框）
API 设计
CMUI.dialog.show(elem, {
autoHideDelay: <num>, //(ms), default 0. 小于等于 0 的值表示不会自动隐藏
//removeCloseBtn: <bool>, // default false
//clickMaskToHideDialog: <bool>, // default false
//beforeShow: <fn>, // callback
//afterShow: <fn>,
//beforeHide: <fn>,
//afterHide: <fn>,
})
CMUI.dialog.hide()
CMUI.dialog.create({
tag: <string>, // default 'div'
id: <string>, // default ''
img: <url>, //default '', no img
title: <html>, // default '提示', no content
content: <html>, // default '', no content
btn: {
primary: {
tag: <string>, // default 'button', 可选 'a'
innerHTML: <html>, // default '确定', 支持 HTML
link: <url>, // default '', no link; if `action` presents or `tag` is not 'a', `link` takes on effect.
className: [''], // default ['cm-btn', 'cm-btn-primary']
action: <string>, // default '', no action
canHideDialog: <bool>, // default false
},
minor: {
className: [''], // default ['cm-btn', 'cm-btn-primary', 'cm-btn-bordered']
/* 其它同上 */
},
},
})
// CMUI.dialog.replaceWith(elem, options) // 暂未实现手工测试用例
// 啥都不指定，会有默认标题
CMUI.dialog.show(CMUI.dialog.create({}))
// 指定 ID
CMUI.dialog.show(CMUI.dialog.create({
id: 'test-dialog',
}))
// 仅指定头图
CMUI.dialog.show(CMUI.dialog.create({
img: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
}))
// 仅指定标题
CMUI.dialog.show(CMUI.dialog.create({
title: '<strong>粗体</strong>测试弹框标题',
}))
// 仅指定内容，会有默认标题
CMUI.dialog.show(CMUI.dialog.create({
content: '<strong>粗体</strong>文字',
}))
// 指定头图、标题
CMUI.dialog.show(CMUI.dialog.create({
img: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
title: '<strong>粗体</strong>测试弹框标题',
}))
// 指定头图、内容
CMUI.dialog.show(CMUI.dialog.create({
img: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
content: '<strong>粗体</strong>文字',
}))
// 标题 + 内容
CMUI.dialog.show(CMUI.dialog.create({
title: '<strong>粗体</strong>测试弹框标题',
content: '<strong>粗体</strong>文字',
}))
// 主按钮不指定细节：有默认文字
CMUI.dialog.show(CMUI.dialog.create({
btn: {
primary: {},
}
}))
// 主按钮指定标签：button
CMUI.dialog.show(CMUI.dialog.create({
btn: {
primary: {
tag: 'button',
action: 'test-action',
className: 'cm-btn cm-btn-warning',
link: 'http://www.abc.com/',
innerHTML: '<strong>粗体</strong>文字',
canHideDialog: true,
},
}
}))
// 主按钮指定标签：a
CMUI.dialog.show(CMUI.dialog.create({
btn: {
primary: {
tag: 'a',
action: 'test-action',
className: 'cm-btn cm-btn-warning',
link: 'http://www.abc.com/',
innerHTML: '<strong>粗体</strong>文字',
canHideDialog: true,
},
}
}))
// 次按钮不指定细节：有默认文字
CMUI.dialog.show(CMUI.dialog.create({
btn: {
minor: {},
}
}))
// 次按钮指定标签：button
CMUI.dialog.show(CMUI.dialog.create({
btn: {
minor: {
tag: 'button',
action: 'test-action',
className: 'cm-btn cm-btn-warning cm-btn-bordered',
link: 'http://www.abc.com/',
innerHTML: '<strong>粗体</strong>文字',
canHideDialog: true,
},
}
}))
// 次按钮指定标签：a
CMUI.dialog.show(CMUI.dialog.create({
btn: {
minor: {
tag: 'a',
action: 'test-action',
className: 'cm-btn cm-btn-warning cm-btn-bordered',
link: 'http://www.abc.com/',
innerHTML: '<strong>粗体</strong>文字',
canHideDialog: true,
},
}
}))
// 指定头图时传入一个配置对象
CMUI.dialog.show(CMUI.dialog.create({
img: {
url: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
}
}))
CMUI.dialog.show(CMUI.dialog.create({
img: {
url: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
width: 100,
}
}))
CMUI.dialog.show(CMUI.dialog.create({
img: {
url: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
height: 100,
}
}))
CMUI.dialog.show(CMUI.dialog.create({
img: {
url: 'http://file.baixing.net/201701/cmui-demo-dialog-img.png',
width: 100,
height: 100,
}
}))
