Message 消息提示

常用于主动操作后的反馈提示。 与 Notification 的区别是后者更多用于系统级通知的被动提醒。

基础用法

默认情况下在顶部显示并在 3 秒后消失

<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()!

const showMessage = (type, showClose) => {
  proxy?.$message({
    message: '1232131',
    type,
    showClose,
  })
}
</script>
<div>
  <vt-button @click="showMessage('info')">点击展示消息</vt-button>
</div>

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。 当需要自定义更多属性时，Message 也可以接收一个对象为参数。 比如，设置 type 字段可以定义不同的状态，默认为info。

<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()!

const showMessage = (type, showClose) => {
  proxy?.$message({
    message: '1232131',
    type,
    showClose,
  })
}
</script>
<vt-button @click="showMessage('info')">info</vt-button>
<vt-button @click="showMessage('success')">success</vt-button>
<vt-button @click="showMessage('warning')">warning</vt-button>
<vt-button @click="showMessage('error')">error</vt-button>

可关闭的消息提示

可以添加关闭按钮。

默认的 Message 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 showClose 设置为 true 默认的关闭时间为 3000 毫秒

<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()!

const showMessage = (type, showClose) => {
  proxy?.$message({
    message: '1232131',
    type,
    showClose,
  })
}
</script>
<vt-button @click="showMessage('info', true)">info</vt-button>

API

名称	类型	默认值	说明
type	string	info	消息类型
message	string	-	展示文字
duration	number	3000	显示时间，单位为毫秒。 设为 0 则不会自动关闭
showClose	boolean	false	是否显示关闭按钮