Dialog
一种对话框,支持按钮交互。
基本用法
this.$dialog(options);
示例
自定义标题和内容
export default {
methods:{
'showDialog1'(){
const options = {
'title':'自定义Dialog标题',
'content':'小屏或移动端浏览效果最佳'
};
this.$dialog(options);
}
}
}
移除右上角关闭按钮、标题栏、按钮栏
export default {
methods:{
//移除右上角按钮
'showDialog2':function(){
const options = {
'title':'自定义Dialog标题',
'content':'小屏或移动端浏览效果最佳',
'noCloseBtn': true
};
this.$dialog(options);
},
//移除顶部标题栏
'showDialog3':function(){
const options = {
'content':'小屏或移动端浏览效果最佳',
'noHeader': true
};
this.$dialog(options);
},
//移除底部按钮栏
'showDialog4':function(){
const options = {
'title':'自定义Dialog标题',
'content':'小屏或移动端浏览效果最佳',
'noFooter': true
};
this.$dialog(options);
},
}
}
事件
export default {
methods:{
'showDialog5':function(){
const options = {
'title':'自定义Dialog标题',
'content':'小屏或移动端浏览效果最佳',
//确定按钮事件
'onOkBtn'(event){
alert('okBtn');
this.close(); //关闭对话框
},
//取消按钮事件
'onCancelBtn'(event){
alert('cancelBtn');
//return false; //阻止默认“关闭对话框”的行为
},
//右上角关闭按钮事件
'onCloseBtn'(event){
alert('closeBtn');
//return false; //阻止默认“关闭对话框”的行为
},
//关闭对话框回调,任何地方关闭对话框都会调用
'closeCallback'(target){
alert('will close');
}
};
this.$dialog(options);
}
}
Options
参数 | 说明 | 类型 | 默认值 | 可选值/备注 |
---|---|---|---|---|
id | 对话框ID | String | '' | 相同ID的对话框共享一个实例 |
content | 对话框内容,支持HTML | String | — | |
title | 对话框标题 | String | — | |
customClass | 新增一个自定义class | String | '' | — |
noCloseBtn | 是否隐藏关闭按钮 | Boolean | false | true/false |
closeOnClickModal | 是否允许点击蒙层关闭对话框 | Boolean | true | true/false |
noHeader | 是否隐藏头部标题栏区域(不影响关闭按钮) | Boolean | false | true/false |
noFooter | 是否隐藏底部按钮区域 | Boolean | false | true/false |
noOkBtn | 是否隐藏确定按钮 | Boolean | false | true/false |
noCancelBtn | 是否隐藏取消按钮 | Boolean | false | true/false |
okBtnTxt | 确定按钮文字 | String | 确 定 | — |
cancelBtnTxt | 取消按钮文字 | String | 取 消 | — |
okBtnDisabled | 把确定按钮设为禁用状态 | Boolean | false | true/false |
cancelAutoClose | 点击取消按钮是否默认关闭对话框 | Boolean | true | true/false |
onOkBtn | 确定按钮点击事件 | Function | null | 唯一参数为原生事件对象 |
onCancelBtn | 取消按钮点击事件 | Function | null | 唯一参数为原生事件对象 |
onCloseBtn | 关闭对话框按钮点击事件 | Function | null | 唯一参数为原生事件对象 |
closeCallback | 对话框关闭回调函数 | Function | null | 可通过唯一参数判断关闭对话框的行为来自哪个元素,'modal'表示蒙层,'closeBtn'表示关闭按钮 |