messageBox的入门学习messageBox的入门学习

81 阅读 0 评论 54 点赞

我是靠谱客的博主伶俐爆米花，最近开发中收集的这篇文章主要介绍messageBox的入门学习messageBox的入门学习，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

messageBox的入门学习

知识点

this.$alert用于弹出消息
this.$confirm用于确认消息，显示取消按钮
this.$prompt用于提交消息，单个数据的提交使用它，复杂的数据提交使用dialog
this.$msgbox用于自定义消息弹框
title设置弹框标题
message设置弹框内容
showConfirmButton默认为true，默认显示提交按钮
showCancelButton默认为false，默认不显示取消按钮
confirmButtonText设置提交按钮文字，默认为提交
cancelButtonText设置取消按钮文字，默认为取消
type设置弹框图标的类型，可设置为success,error,warning,info
showClose控制显示右上方的关闭图标按钮
distinguishCancelAndClose设置为true，区分关闭和取消按钮的action，分别为close和cancel,设置为false,都为cancel
inputPattern为输入框的正则表达式校验
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>