# ui-msg 消息提示组件
版本：v2.3.11
消息提示组件用于显示临时的消息提示，支持多种类型和自定义配置
# 基本使用
<template>
<div class="msg-demo">
<ui-button @click="showMsg('success')">成功消息</ui-button>
<ui-button @click="showMsg('warning')">警告消息</ui-button>
<ui-button @click="showMsg('danger')">错误消息</ui-button>
<ui-button @click="showMsg('info')">提示消息</ui-button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { showMsg } from 'shadow-ui3';
const showMsg = (type) => {
showMsg({
type,
message: `这是一{type}消息`,
duration: 3000
});
};
</script>
<style scoped>
.msg-demo {
padding: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
</style>
# 方法名
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
showMsg | 显示消息提示 | options: Object 配置选项 | id: Number 消息ID |
closeMsg | 关闭指定消息 | id: Number 消息ID | - |
closeAll | 关闭所有消 | - | - |
# Options
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
type | String | 'info' | 消息类型，可选值：success、warning、danger、info |
message | String | - | 消息内容 |
duration | Number | 3000 | 消息显示时长，单位：ms表示永久显示 |
position | String | 'top' | 消息位置，可选值：top、bottom、top-left、top-right、bottom-left、bottom-right |
icon | String | - | 自定义图 |
onClose | Function | - | 消息关闭时的回调函数 |