messageBox的入门学习
知识点
this.$alert用于弹出消息this.$confirm用于确认消息，显示取消按钮this.$prompt用于提交消息，单个数据的提交使用它，复杂的数据提交使用dialogthis.$msgbox用于自定义消息弹框title设置弹框标题message设置弹框内容showConfirmButton默认为true，默认显示提交按钮showCancelButton默认为false，默认不显示取消按钮confirmButtonText设置提交按钮文字，默认为提交cancelButtonText设置取消按钮文字，默认为取消type设置弹框图标的类型，可设置为success,error,warning,infoshowClose控制显示右上方的关闭图标按钮distinguishCancelAndClose设置为true，区分关闭和取消按钮的action，分别为close和cancel,设置为false,都为cancelinputPattern为输入框的正则表达式校验inputErrorMessage为错误格式的提示信息beforeClose的三个参数action,instance,done，instance为触发按钮的实例，done方法为关闭弹框的钩子，instance.confirmButtonLoading=true,确认按钮变成加载状态,false则恢复正常action为confirm，进入then，action为close/cancel，进入catch
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id='app'>
<el-button @click='handleAlert'>alert按钮</el-button>
<el-button @click='handleConfirm'>confirm按钮</el-button>
<el-button @click='handlePrompt'>prompt按钮</el-button>
<el-button @click='handleMsgBox'>msgBox按钮</el-button>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data() {
return {
}
},
methods: {
handleAlert() {
this.$alert('<i>消息内容</i>', '消息弹框', {
dangerouslyUseHTMLString: true,
confirmButtonText: '收到',
type: 'info',
callback: action => {
this.$message({
type: 'info',
message: '完毕'
})
}
})
},
handleConfirm() {
this.$confirm('确认消息', '确认弹框', {
confirmButtonText: '嗯!',
cancelButtonText: 'No!',
type: 'warning',
distinguishCancelAndClose: true,
}).then(() => {
this.$message({
type: 'success',
message: 'Yes'
})
}).catch((action) => {
this.$message({
type: 'info',
message: action === 'cancel' ? 'cancel' : 'close'
})
})
},
handlePrompt() {
this.$prompt('提交消息', '提交弹框', {
confirmButtonText: '提交',
cancelButtonText: '取消',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确'
}).then((value) => {
this.$message({
type: 'success',
message: value
})
}).catch(() => {
this.$message({
type: 'info',
message: '取消'
})
})
},
handleMsgBox() {
this.$msgbox({
title: '自定义消息弹框',
message: '自定义消息',
confirmButtonText: '自定义确认',
cancelButtonText: '自定义取消',
showCancelButton: true,
distinguishCancelAndClose: true,
beforeClose: ((action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true
instance.confirmButtonText = '加载中'
setTimeout(() => {
instance.confirmButtonLoading = false
done()
}, 1000)
} else {
done()
}
})
}).then(action => {
this.$message({
type: 'success',
message: 'success'
})
}).catch(action => {
this.$message({
type: 'info',
message: action === 'cancel' ? 'cancel' : 'close'
})
})
}
}
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
官网
messageBox的学习官网