介绍
本文档主要用于描述 ShadcnNotification 组件的特性和用法。
用法
查看代码
vue
<template>
<ShadcnNotification @on-item-click="handleNotificationClick"
@on-read-all="handleReadAll"
@on-clear-all="handleClearAll" :dark="darkMode">
<ShadcnNotificationItem v-for="(item, index) in notifications" :key="index" :item="item" @on-click="handleNotificationClick" :dark="darkMode" />
</ShadcnNotification>
</template>触发器 (trigger)
查看代码
vue
<template>
<ShadcnNotification trigger :dark="darkMode">
<ShadcnNotificationItem v-for="(item, index) in notifications" :key="index" :item="item" @on-click="handleNotificationClick" :dark="darkMode" />
</ShadcnNotification>
</template>宽度 (width)
查看代码
vue
<template>
<ShadcnNotification trigger width="50%" :dark="darkMode">
<ShadcnNotificationItem v-for="(item, index) in notifications" :key="index" :item="item" @on-click="handleNotificationClick" :dark="darkMode" />
</ShadcnNotification>
</template>高度 (height)
查看代码
vue
<template>
<ShadcnNotification trigger height="200px" :dark="darkMode">
<ShadcnNotificationItem v-for="(item, index) in notifications" :key="index" :item="item" @on-click="handleNotificationClick" :dark="darkMode" />
</ShadcnNotification>
</template>位置 (position)
查看代码
vue
<template>
<ShadcnNotification position="center" height="200px" :dark="darkMode">
<ShadcnNotificationItem v-for="(item, index) in notifications" :key="index" :item="item" @on-click="handleNotificationClick" :dark="darkMode" />
</ShadcnNotification>
</template>