MessageBox

Used for displaying empty data state.

Basic Usage

Simply insert content using the default slot.

<template>
  <div>
    <b-button
      type="primary"
      @click="alert({ type: 'info', title: 'Title', message: 'This is the dialog content.', width: '500px' })"
    >
      Info
    </b-button>
    <b-button
      type="success"
      @click="alert({ type: 'success', title: 'Title', message: 'This is the dialog content.' })"
    >
      Success
    </b-button>
    <b-button
      type="warning"
      @click="alert({ type: 'warning', title: 'Title', message: 'This is the dialog content.' })"
    >
      Warning
    </b-button>
    <b-button type="danger" @click="showAlert">Error</b-button>
  </div>
</template>

<script setup lang="ts">
import { MessageBox, Message } from 'bin-ui-design'

function alert(opt) {
  MessageBox.alert(opt)
}

function showAlert() {
  MessageBox.alert({
    type: 'error',
    title: 'Title',
    message: 'This is the dialog content.',
    callback: action => {
      Message({
        type: 'info',
        message: `action: ${action}`
      })
    }
  })
}
</script>

Confirm Dialog

Simulate a confirm dialog for submit actions.

<template>
  <div>
    <b-button type="default" @click="open">Openconfirm</b-button>
  </div>
</template>

<script setup lang="ts">
import { MessageBox, Message } from 'bin-ui-design'

function open() {
  MessageBox.confirm({
    type: 'warning',
    title: 'Warning',
    message: '<p>此Actions将永久<span style="color:red;">Delete</span>该文件, 是否继续?</p>',
    useHTML: true
  })
    .then(() => {
      Message({ type: 'success', message: 'DeleteSuccess!' })
    })
    .catch(() => {
      Message({ type: 'info', message: '已CancelDelete' })
    })
}
</script>

Custom

Content can be customized.

<template>
  <div>
    <b-button type="default" @click="open">OpenMessageBox</b-button>
  </div>
</template>

<script setup lang="ts">
import { MessageBox, Message } from 'bin-ui-design'
import { h } from 'vue'

function open() {
  MessageBox.confirm({
    title: 'Message',
    message: h('p', null, [
      h('span', null, 'Content can be '),
      h('i', { style: 'color: teal' }, 'VNode')
    ]),
    showCancelButton: true,
    confirmText: 'OK',
    cancelText: 'Cancel',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmText = '执Row中... , 三SecondClose'
        setTimeout(() => {
          done()
          setTimeout(() => {
            instance.confirmButtonLoading = false
          }, 300)
        }, 3000)
      } else {
        done()
      }
    }
  })
    .then(action => {
      Message({
        type: 'info',
        message: 'action: ' + action
      })
    })
    .catch(() => {
      Message({ type: 'info', message: 'Cancel' })
    })
}
</script>

API

In Vue 3, import the Message function and call it. The parameter can be a string or a CreateMessageProps object. For convenience, four type-specific call methods are also provided.

import { MessageBox } from 'bin-ui-design'

// Options can be passed as a string. If a string is provided, it uses the default configuration and fills the message property.
MessageBox(options)
Message.alert(options)
Message.confirm(options)

Options

Function	Description	Type	Default
title	Title	String	—
message	Content	String /Element String	—
type	Type, used to show icons: info, success, warning, error	String	—
useHTML	Whether to use HTML content	Boolean	false
iconClass	Replace icon name (without prefix)	String	—
callback	Callback function. If not using Promise, it can be specified via the parameter. The parameter is action, with values 'confirm' or 'cancel'	Function	—
beforeClose	Callback before closing. Pauses the instance. action can be 'confirm' or 'cancel'	String	cancel
showCancelButton	Whether to show cancelbutton	Boolean	false
scrollable	Whether the page can scroll	Boolean	false
showConfirmButton	Whether to show the confirm button	Boolean	true
cancelText	Cancel button text	String	cancel
confirmText	Confirm button text	String	Confirm
maskClosable	Whether clicking the mask closes the dialog	Boolean	true, false for alert
escClosable	Whether pressing ESC closes the dialog	Boolean	true, false for alert