Message 消息弹窗

全局展示操作反馈信息 ——该组件泛用性极强，对策性一般 (超大杯)

基本使用

通过调用createMessage方法创建消息弹窗，3s后自动销毁。支持传入文本与Vnode。

基本使用

<!-- 消息弹窗的基本使用 -->
<script setup>
// 导入路径请参考安装部分
import { UtpButton, createMessage } from '@will1919/utopia-ui'
import { h } from 'vue'

const createTextMessage = () => {
  createMessage({ message: '这是一条文本消息' })
}
const createVnodeMessage = () => {
  createMessage({ message: h('i', { style: { 'font-weight': 'bold' } }, '这是一个斜体加粗的Vnode消息') })
}
</script>

<template>
  <div>
    <UtpButton @click="createTextMessage" plain>创建文本消息</UtpButton>
    <UtpButton @click="createVnodeMessage" plain>创建Vnode消息</UtpButton>
  </div>
</template>

不同的提示类型

可以通过传入type属性，提示主要，成功，错误以及不重要信息

不同类型

<!-- 不同类型的消息弹窗 -->
<script setup>
// 导入路径请参考安装部分
import { UtpButton, createMessage } from '@will1919/utopia-ui'

const createPrimaryMessage = () => {
  createMessage({message: '这是一条主要消息', type: 'primary'})
}
const createSuccessMessage = () => {
  createMessage({message: '这是一条成功消息', type: 'success'})
}
const createErrorMessage = () => {
  createMessage({message: '这是一条错误消息', type: 'error'})
}
const createInfoMessage = () => {
  createMessage({message: '这是一条不重要消息', type: 'info'})
}
</script>

<template>
  <div>
    <UtpButton @click="createPrimaryMessage" type="primary" plain>创建主要消息</UtpButton>
    <UtpButton @click="createSuccessMessage" type="success" plain>创建正确消息</UtpButton>
    <UtpButton @click="createErrorMessage" type="error" plain>创建错误消息</UtpButton>
    <UtpButton @click="createInfoMessage" type="info" plain>创建不重要消息</UtpButton>
  </div>
</template>

可以关闭的提示

默认的消息弹窗没有关闭按钮，可以传入showClose属性展示关闭按钮。如果想要消息弹窗不自动消失，可以设置duration为0

可以关闭的提示

<!-- 可以关闭的消息弹窗 -->
<script setup>
// 导入路径请参考安装部分
import { UtpButton, createMessage } from '@will1919/utopia-ui'

const createCanCloseMessage = () => {
  createMessage({ message: '这是一条可以关闭的消息', showClose: true })
}
const createMugenMessage = () => {
  createMessage({ message: '这是一条不会自动关闭的消息', showClose: true, duration: 0 })
}
</script>

<template>
  <div>
    <UtpButton @click="createCanCloseMessage" plain>创建可以关闭的消息</UtpButton>
    <UtpButton type="error" @click="createMugenMessage" plain>创建不会自动关闭的消息</UtpButton>
  </div>
</template>

关闭全部消息

调用创建消息后，可以通过closeAll函数手动关闭所有已经生成的消息实例

不同类型

<!-- 关闭全部消息弹窗 -->
<script setup>
// 导入路径请参考安装部分
import { UtpButton, createMessage, closeMessageAll } from '@will1919/utopia-ui'

const createTextMessage = () => {
  createMessage({message: '这是一条文本消息', duration: 0})
  createMessage({message: '这是一条文本消息', duration: 0})
  createMessage({message: '这是一条文本消息', duration: 0})
}
const closeAllMessage = () => {
  closeMessageAll()
}
</script>

<template>
  <div>
    <UtpButton @click="createTextMessage" plain>创建三条文本消息</UtpButton>
    <UtpButton type="info" @click="closeAllMessage" plain>关闭所有信息</UtpButton>
  </div>
</template>

Message API

函数

函数名称	说明	类型
createMessage	创建Message实例	(Message可接收参数) => Message实例
getLastInstance	获取最后一个消息组件对应的实例	() => Message实例|undefined
getLastBottomOffset	获取传入组件的上一个组件底部位置信息	(id: string) => number
closeMessageAll	销毁所有的消息	() => void

Message可接收参数

属性	说明	类型	默认值
message	设置消息内容	string | Vnode	—
type	设置消息类型	primary | success | info| error	primary
duration	设置消息展示时间	number	3000
offset	设置消息实例之间的间隔	number	20

Message实例

属性	说明	类型
id	消息实例ID	string
vnode	消息实例的Vnode对象	VNode
vm	消息实例的Vnode所表示的组件的内部实例对象	ComponentInternalInstance
props	消息组件接受的参数	Object
destory	消息组件销毁，并删除实例数组中对应的实例	() => void