Notification 消息通知

更新: 2025/1/15 字数: 0 字 时长: 0 分钟

说明

用于显示系统内的消息通知，类似于聊天消息弹窗。

基本使用

通知消息

v-model:show 用于控制通知消息的显示与隐藏，同时还有duration属性用于控制通知消息的显示时间(ms)，默认为5000毫秒，设置为0表示不关闭。

<script setup>
const show = ref(false);
</script>
<template>
  <div>
    <van-button type="primary" @click="show = true"> 通知按钮 </van-button>
    <Notification v-model:show="show" />
  </div>
</template>

自定义插槽

可以通过自定义插槽来定制通知消息的内容，可以设置图标icon，标题title，内容message。

<script setup>
const show = ref(false);
</script>
<template>
  <div>
    <van-button type="primary" @click="show = true"> 自定义内容 </van-button>
    <Notification v-model:show="show" icon="">
      <template #title>
        <div class="flex items-center">
          <div class="mr-10 text-20">
            <van-icon name="bell" />
          </div>
          <div class="text-16">通知标题</div>
        </div>
      </template>
    </Notification>
  </div>
</template>

自定义事件

可以通过opened事件监听通知完全展示， close事件来监听通知消息的关闭。

<script setup>
const show = ref(false);
const message = ref("收到了一条新消息");

function handleOpened() {
  setTimeout(() => {
    message.value = "对方撤回了一条消息";
  }, 2000);
}
</script>
<template>
  <div>
    <van-button type="primary" @click="show = true"> 通知按钮 </van-button>
    <Notification
      v-model:show="show"
      :message="message"
      @opened="handleOpened"
    />
  </div>
</template>

API

传参配置

参数	说明	类型	默认值
v-mode: show	是否显示通知	Boolean	false
title	通知标题	String	微信 · 刚刚
message	通知消息内容	String	发来了一条新消息
duration	通知持续显示的时间，单位为毫秒	Number	5000
icon	自定义通知图标	String	wechat
avatar	自定义通知头像	String	-

事件

事件名	说明	回调参数
opened	通知完全展示时触发	-
close	通知关闭时触发	-