介绍

本文档主要用于描述 ShadcnNotification 组件的特性和用法。

用法

查看代码

<template>
  <ShadcnNotification @on-item-click="handleNotificationClick"
                      @on-read-all="handleReadAll"
                      @on-clear-all="handleClearAll">
    <ShadcnNotificationItem v-for="(item, index) in notifications" :key="index" :item="item" @on-click="handleNotificationClick"/>
  </ShadcnNotification>
</template>

触发器 (trigger)

查看代码

<template>
  <ShadcnNotification trigger>
    <ShadcnNotificationItem v-for="(item, index) in notifications" :key="index" :item="item" @on-click="handleNotificationClick"/>
  </ShadcnNotification>
</template>

宽度 (width)

查看代码

<template>
  <ShadcnNotification trigger width="50%">
    <ShadcnNotificationItem v-for="(item, index) in notifications" :key="index" :item="item" @on-click="handleNotificationClick"/>
  </ShadcnNotification>
</template>

高度 (height)

查看代码

<template>
  <ShadcnNotification trigger height="200px">
    <ShadcnNotificationItem v-for="(item, index) in notifications" :key="index" :item="item" @on-click="handleNotificationClick"/>
  </ShadcnNotification>
</template>

位置 (position)

查看代码

<template>
  <ShadcnNotification position="center" height="200px">
    <ShadcnNotificationItem v-for="(item, index) in notifications" :key="index" :item="item" @on-click="handleNotificationClick"/>
  </ShadcnNotification>
</template>

加载数据 (loadData)

通知中心 (Notification) 属性

通知中心 (Notification) 事件

通知中心(Notification) 插槽