4dkankan-components/docs/examples/message-box/customization.vue

<template>
    <el-button text @click="open">Click to open Message Box</el-button>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const open = () => {
    ElMessageBox({
        title: 'Message',
        message: h('p', null, [h('span', null, 'Message can be '), h('i', { style: 'color: teal' }, 'VNode')]),
        showCancelButton: true,
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
                instance.confirmButtonLoading = true
                instance.confirmButtonText = 'Loading...'
                setTimeout(() => {
                    done()
                    setTimeout(() => {
                        instance.confirmButtonLoading = false
                    }, 300)
                }, 3000)
            } else {
                done()
            }
        },
    }).then(action => {
        ElMessage({
            type: 'info',
            message: `action: ${action}`,
        })
    })
}
</script>