BIN-UI-DESIGN

Appearance

On this page

弹框提示 MessageBox ​

空显示状态，用于给内部无数据情况的展示。十分简单

基础用法 ​

直接用组件默认插槽插入即可

<template>
  <div>
    <b-button
      type="primary"
      @click="alert({ type: 'info', title: '标题', message: '我是弹窗内容', width: '500px' })"
    >
      Info
    </b-button>
    <b-button
      type="success"
      @click="alert({ type: 'success', title: '标题', message: '我是弹窗内容' })"
    >
      Success
    </b-button>
    <b-button
      type="warning"
      @click="alert({ type: 'warning', title: '标题', message: '我是弹窗内容' })"
    >
      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: '标题',
    message: '我是弹窗内容',
    callback: action => {
      Message({
        type: 'info',
        message: `action: ${action}`
      })
    }
  })
}
</script>
<template>
  <div>
    <b-button
      type="primary"
      @click="alert({ type: 'info', title: '标题', message: '我是弹窗内容', width: '500px' })"
    >
      Info
    </b-button>
    <b-button
      type="success"
      @click="alert({ type: 'success', title: '标题', message: '我是弹窗内容' })"
    >
      Success
    </b-button>
    <b-button
      type="warning"
      @click="alert({ type: 'warning', title: '标题', message: '我是弹窗内容' })"
    >
      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: '标题',
    message: '我是弹窗内容',
    callback: action => {
      Message({
        type: 'info',
        message: `action: ${action}`
      })
    }
  })
}
</script>

模拟confirm ​

模拟confirm提交选择

<template>
  <div>
    <b-button type="default" @click="open">打开confirm</b-button>
  </div>
</template>

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

function open() {
  MessageBox.confirm({
    type: 'warning',
    title: '提示',
    message: '<p>此操作将永久<span style="color:red;">删除</span>该文件, 是否继续?</p>',
    useHTML: true
  })
    .then(() => {
      Message({ type: 'success', message: '删除成功!' })
    })
    .catch(() => {
      Message({ type: 'info', message: '已取消删除' })
    })
}
</script>
<template>
  <div>
    <b-button type="default" @click="open">打开confirm</b-button>
  </div>
</template>

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

function open() {
  MessageBox.confirm({
    type: 'warning',
    title: '提示',
    message: '<p>此操作将永久<span style="color:red;">删除</span>该文件, 是否继续?</p>',
    useHTML: true
  })
    .then(() => {
      Message({ type: 'success', message: '删除成功!' })
    })
    .catch(() => {
      Message({ type: 'info', message: '已取消删除' })
    })
}
</script>

自定义 ​

可以自定义内容

<template>
  <div>
    <b-button type="default" @click="open">打开MessageBox</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: h('p', null, [
      h('span', null, '内容可以是 '),
      h('i', { style: 'color: teal' }, 'VNode')
    ]),
    showCancelButton: true,
    confirmText: 'OK',
    cancelText: 'Cancel',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmText = '执行中... , 三秒关闭'
        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>
<template>
  <div>
    <b-button type="default" @click="open">打开MessageBox</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: h('p', null, [
      h('span', null, '内容可以是 '),
      h('i', { style: 'color: teal' }, 'VNode')
    ]),
    showCancelButton: true,
    confirmText: 'OK',
    cancelText: 'Cancel',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmText = '执行中... , 三秒关闭'
        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 ​

vue3中引入Message并进行函数调用，同时Message入参可为string类型或者是 CreateMessageProps对象类型，同时，为方便调用，也扩展了四种 type 的调用

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

// options 可 直接传入字符串，如入参是字符串，则代表使用默认配置，入参填入message属性中进行调用
MessageBox(options)
Message.alert(options)
Message.confirm(options)
import { MessageBox } from 'bin-ui-design'

// options 可 直接传入字符串，如入参是字符串，则代表使用默认配置，入参填入message属性中进行调用
MessageBox(options)
Message.alert(options)
Message.confirm(options)

Options ​

函数说明类型默认值
title标题String—
message内容String /Element String—
type类别，用于显示图标,info,success,warning,errorString—
useHTML是否使用html插入Booleanfalse
iconClass替换图表名称（不带前缀）String—
callback回调函数，不实用promise，可以用参数指定，参数为action，值为'confirm','cancel'Function—
beforeClose闭前的回调，会暂停实例的关闭(action, instance, done)，action 的值为'confirm', 'cancel'String取消
showCancelButton是否显示取消按钮Booleanfalse
scrollable页面是否可以滚动Booleanfalse
showConfirmButton是否显示确定按钮Booleantrue
cancelText取消按钮文字String取消
confirmText确定按钮文字String确定
maskClosable是否可以点击遮罩关闭Booleantrue ,alert时为false
escClosableesc按钮关闭Booleantrue ,alert时为false

MIT Licensed | Copyright © 2023-present bin-ui-design