MessageBox 消息弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

WARNING

拖拽功能 正在开发中。。。🔨

消息提示

当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。

调用 VhMessageBox.confirm 方法以打开 alert 框。 它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。 此例中接收了两个参数，message 和 title。

窗口被关闭后，它默认会返回一个Promise对象便于进行后续操作的处理。

<template>
    <Button @click="open">Click to open the Message Box</Button>
</template>
<script setup>
import Button from '@/components/Button/Button.vue'
import { VhMessageBox } from '@/components/Messagebox/method'
import { createMessage } from '@/components/Message/method'
const open = () => {
    VhMessageBox.alert({
        title: 'Title',
        message: 'This is a message',
        confirmButtonText: 'OK',
        closeOnClickModal: true
    }).then((state) => {
        createMessage({ message: '确定', duration: 1000, type: 'success' })
    }).catch((type) => {
        createMessage({ message: `${type}`, duration: 1000, type: 'info' })
    })
}
</script>

确认消息

提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。

调用 VhMessageBox.confirm 方法以打开 confirm 框。它模拟了系统的 confirm。

type 字段表明消息类型，可以为 success，error，info和 warning。

返回了一个 Promise 来处理后续响应。

窗口被关闭后，它默认会返回一个Promise对象便于进行后续操作的处理。

<template>
    <Button @click="open_success">success</Button>
    <Button @click="open_warning">warning</Button>
    <Button @click="open_error">error</Button>
    <Button @click="open_info">info</Button>
</template>
<script setup>
import Button from '@/components/Button/Button.vue'
import { VhMessageBox } from '@/components/Messagebox/method'
import { createMessage } from '@/components/Message/method'
const open_success = () => {
    VhMessageBox.confirm({
        title: 'Success',
        message: 'this is Success',
        type: 'success'
    }).then((state) => {
        createMessage({ message: 'confirm', duration: 1000, type: 'success' })
    }).catch((state) => {
        createMessage({ message: `${state}`, duration: 1000, type: 'info' })
    })
}

const open_warning = () => {
    VhMessageBox.confirm({
        title: 'Warning',
        message: 'this is Warning',
        type: 'warning'
    })
}

const open_error = () => {
    VhMessageBox.confirm({
        title: 'Error',
        message: 'this is Error',
        type: 'error'
    })
}

const open_info = () => {
    VhMessageBox.confirm({
        title: 'Info',
        message: 'this is Info',
        type: 'info'
    })
}
</script>

可拖放

设置draggable属性为 true 来开启拖拽弹窗能力。

<template>
    <Button @click="open">Click to open the Message Box</Button>
</template>
<script setup>
import Button from '@/components/Button/Button.vue'
import { VhMessageBox } from '@/components/Messagebox/method'
import { createMessage } from '@/components/Message/method'
const open = () => {
    VhMessageBox.alert({
        title: 'Title',
        message: 'This is a message',
        confirmButtonText: 'OK',
        draggable: true
    }).then((state) => {
        createMessage({ message: '确定', duration: 1000, type: 'success' })
    }).catch((type) => {
        createMessage({ message: `${type}`, duration: 1000, type: 'info' })
    })
}
</script>

使用 VNode

message 可以是 VNode。

<template>
    <Button plain @click="open">Common VNode</Button>
    <Button plain @click="open1">Dynamic props</Button>
</template>
<script setup>
import { h, ref } from 'vue'
import Button from '@/components/Button/Button.vue'
import Switch from '@/components/Switch/Switch.vue'
import { VhMessageBox } from '@/components/Messagebox/method'
import { createMessage } from '@/components/Message/method'
const open = () => {
    VhMessageBox.alert({
        title: 'Title',
        message: h('p', null, [
                        h('span', null, 'Message can be '),
                        h('i', { style: 'color: teal' }, 'VNode'),
                 ]),
        confirmButtonText: 'OK',
    }).then((state) => {
        createMessage({ message: '确定', duration: 1000, type: 'success' })
    }).catch((type) => {
        createMessage({ message: `${type}`, duration: 1000, type: 'info' })
    })
}

const checked = ref(false)
const open1 = () => {
    VhMessageBox.alert({
        title: 'Title',
        message: h(Switch, {
            modelValue: checked.value
        })
    })
}
</script>

参数

属性名	说明	类型	默认值
title	MessageBox 的标题	string	''
message	MessageBox 的正文内容	vNode || string	''
type	消息类型，用于图标显示	success|error| info| warning
showClose	MessageBox 是否显示右上角关闭按钮	boolean	true
showCancelButton	是否显示取消按钮	boolean	true
showConfirmButton	是否显示确定按钮	boolean	true
cancelButtonText	取消按钮的文本内容	string	取消
confirmButtonText	确定按钮的文本内容	string	确定
closeOnClickModal	是否可通过点击遮罩层关闭 MessageBox	string	false
draggable	MessageBox 是否可拖放	boolean	false