BIN-UI-DESIGN

Appearance

On this page

消息提示 Message ​

轻量级的信息反馈组件，在顶部居中显示，并自动消失。有多种不同的提示状态可选择。

基础用法 ​

基本用法，默认在 3 秒后关闭

<template>
  <div>
    <b-button @click="message1">info</b-button>
    <b-button @click="message2">render函数</b-button>
  </div>
</template>

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

function message1() {
  Message('普通的消息提示！')
}

function message2() {
  Message.info({
    message: h('i', { style: 'color: red' }, '我是render函数渲染出来的内容')
  })
}
</script>
<template>
  <div>
    <b-button @click="message1">info</b-button>
    <b-button @click="message2">render函数</b-button>
  </div>
</template>

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

function message1() {
  Message('普通的消息提示！')
}

function message2() {
  Message.info({
    message: h('i', { style: 'color: red' }, '我是render函数渲染出来的内容')
  })
}
</script>

不同类别 ​

用来显示「成功、警告、消息、错误」类的操作反馈。

<template>
  <div>
    <b-button type="primary" plain @click="message1">info</b-button>
    <b-button type="success" plain @click="message2">success</b-button>
    <b-button type="warning" plain @click="message3">warning</b-button>
    <b-button type="danger" plain @click="message4">error</b-button>
  </div>
</template>

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

function message1() {
  Message.info('我是普通消息提示')
}
function message2() {
  Message.success('成功的提示消息')
}
function message3() {
  Message.warning('警告的提示消息')
}
function message4() {
  Message.error('错误的提示消息')
}
</script>
<template>
  <div>
    <b-button type="primary" plain @click="message1">info</b-button>
    <b-button type="success" plain @click="message2">success</b-button>
    <b-button type="warning" plain @click="message3">warning</b-button>
    <b-button type="danger" plain @click="message4">error</b-button>
  </div>
</template>

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

function message1() {
  Message.info('我是普通消息提示')
}
function message2() {
  Message.success('成功的提示消息')
}
function message3() {
  Message.warning('警告的提示消息')
}
function message4() {
  Message.error('错误的提示消息')
}
</script>

其他参数 ​

可以设置配置参数来渲染

<template>
  <div>
    <b-button @click="message1">我10秒消失</b-button>
    <b-button @click="message2">可关闭的</b-button>
    <b-button @click="message3">不会关闭</b-button>
  </div>
</template>

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

function message1() {
  Message.info({ message: '我10秒消失', duration: 10 })
}
function message2() {
  Message.success({ message: '我是可关闭的的提示', duration: 5, showClose: true })
}
function message3() {
  Message.warning({ message: '我永远不会关闭除非手动', duration: 0, showClose: true, zIndex: 3000 })
}
</script>
<template>
  <div>
    <b-button @click="message1">我10秒消失</b-button>
    <b-button @click="message2">可关闭的</b-button>
    <b-button @click="message3">不会关闭</b-button>
  </div>
</template>

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

function message1() {
  Message.info({ message: '我10秒消失', duration: 10 })
}
function message2() {
  Message.success({ message: '我是可关闭的的提示', duration: 5, showClose: true })
}
function message3() {
  Message.warning({ message: '我永远不会关闭除非手动', duration: 0, showClose: true, zIndex: 3000 })
}
</script>

手动关闭 ​

可以调用Message模块的 closeAll() 函数来手动关闭

<template>
  <div>
    <b-button @click="message">创建三条不会关闭的消息</b-button>
    <b-button @click="closeAll">关闭所有</b-button>
  </div>
</template>

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

function message() {
  Message.warning({ message: '消息1', duration: 0 })
  Message.warning({ message: '消息2', duration: 0 })
  Message.warning({ message: '消息3', duration: 0 })
}

function closeAll() {
  Message.closeAll()
}
</script>
<template>
  <div>
    <b-button @click="message">创建三条不会关闭的消息</b-button>
    <b-button @click="closeAll">关闭所有</b-button>
  </div>
</template>

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

function message() {
  Message.warning({ message: '消息1', duration: 0 })
  Message.warning({ message: '消息2', duration: 0 })
  Message.warning({ message: '消息3', duration: 0 })
}

function closeAll() {
  Message.closeAll()
}
</script>

API ​

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

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

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

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

Options 对象 ​

函数说明类型默认值
message通知提醒的内容String—
duration自动关闭的延时，单位秒，不关闭可以写 0Number3
onClose关闭时的回调Function—
showClose是否显示关闭按钮Booleantrue
useHTML是否将message转换成HTML片段插入，此操作需谨慎Booleanfalse
offset距离顶部的偏移量，设置后可以固定某个消息距离窗口顶部的位置（不进行向下追加）Number—
zIndex层级，默认2000以后追加Number—

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