web技术学习

切换模式

本文总阅读量 次

vue3 组件-通知菜单 ​

该组件依赖element-plus。

基础用法 ​

vue
<template>
  <KNotification
    :value="34"
    :list="list"
    :actions="actions"
    @click-item="clickItem"
    @click-action="clickAction"
  />
</template>
<script setup lang="ts">
import type {
  NotificationProps,
  NotificationEmits,
} from "@tomiaa/vue3-components"
import { KNotification } from "@tomiaa/vue3-components"

const avatar =
  "//img2.baidu.com/it/u=2050797336,2181305862&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=224"
const list: NotificationProps["list"] = [
  {
    title: "消息",
    content: [
      {
        avatar,
        title: "标题",
        desc: "描述",
        time: "2022-12-12",
        tag: "标签",
        tagType: "success",
      },
      {
        avatar,
        title: "标题1",
        desc: "描述1",
        time: "2022-12-12 08:00:00",
        tag: "标签",
        tagType: "info",
      },
      {
        avatar,
        title: "标题1",
        desc: "描述1",
        time: "2022-12-12 08:00:00",
        tag: "标签",
        tagType: "warning",
      },
      {
        avatar,
        title: "标题1",
        desc: "描述1",
        time: "2022-12-12 08:00:00",
        tag: "标签",
        tagType: "warning",
      },
    ],
  },
  {
    title: "通知",
    content: [
      {
        avatar,
        title: "标题1",
        desc: "描述1",
        time: "2022-12-12 08:00:00",
        tagType: "info",
      },
      {
        avatar,
        title: "标题1",
        desc: "描述1",
        time: "2022-12-12 08:00:00",
        tagType: "info",
      },
      {
        avatar,
        title: "标题1",
        desc: "描述1",
        time: "2022-12-12 08:00:00",
        tagType: "info",
      },
    ],
  },
  {
    title: "代办",
    content: [
      {
        title: "代办标题1",
        desc: "代办描述1",
        time: "2022-12-12 08:00:00",
        tag: "标签",
        tagType: "warning",
      },
    ],
  },
]

const actions: NotificationProps["actions"] = [
  {
    text: "清空",
    icon: "ElIconDelete",
  },
  {
    text: "查看更多",
    icon: "ElIconMore",
  },
]

const clickItem: NotificationEmits["clickItem"] = ({ item, index }) => {
  console.log(item, index, "点击某一项")
}
const clickAction: NotificationEmits["clickAction"] = ({ item, index }) => {
  console.log(item, index, "点击操作栏")
}
</script>

插槽 ​

vue
<template>
  <KNotification
    :value="94"
    :list="list"
    :actions="actions"
  >
    <template #icon> <ElIconOperation /> </template>
    <template #action="{ item, index }">
      <div v-if="index">第{{ index }}个: {{ item.text }}</div>
    </template>
    <template #default="{ item, index }">
      <div v-if="!index">这里是插槽：第{{ index }}项，{{ item.desc }}</div>
    </template>
  </KNotification>
</template>
<script setup lang="ts">
import type { NotificationProps } from "@tomiaa/vue3-components"
import { KNotification } from "@tomiaa/vue3-components"

const avatar =
  "//img2.baidu.com/it/u=2050797336,2181305862&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=224"
const list: NotificationProps["list"] = [
  {
    title: "消息",
    content: [
      {
        avatar,
        title: "标题",
        desc: "描述",
        time: "2022-12-12",
        tag: "标签",
        tagType: "success",
      },
      {
        avatar,
        title: "标题1",
        desc: "描述1",
        time: "2022-12-12 08:00:00",
        tag: "标签",
        tagType: "info",
      },
    ],
  },
  {
    title: "通知",
    content: [
      {
        avatar,
        title: "标题1",
        desc: "描述1",
        time: "2022-12-12 08:00:00",
        tagType: "info",
      },
    ],
  },
  {
    title: "代办",
    content: [
      {
        title: "代办标题1",
        desc: "代办描述1",
        time: "2022-12-12 08:00:00",
        tag: "标签",
        tagType: "warning",
      },
    ],
  },
]

const actions: NotificationProps["actions"] = [
  {
    text: "清空",
    icon: "ElIconDelete",
  },
  {
    text: "查看更多",
    icon: "ElIconMore",
  },
]
</script>

属性 ​

属性说明类型默认值必填
icon图标按钮StringElIconBellfalse
value数量String | Numberfalse
max最大值Numberfalse
isDot是否显示小圆点Booleanfalsefalse
list列表内容NotificationListOptions[]true
actions底部操作内容NotificationActionOptions[]false

类型声明 ​

ts
import type {
  NotificationProps, // 属性声明
  NotificationEmits, // 事件声明
} from "@tomiaa/vue3-components"

// NotificationProps["属性名"]
// const prop: NotificationProps["属性名"] = xxx
// NotificationEmits["事件名"]
// const prop: NotificationEmits["事件名"] = xxx

// 列表的每一项
export interface NotificationListItem {
  // 头像
  avatar?: string
  // 标题
  title?: string
  // 描述
  desc?: string
  // 时间
  time?: string
  // 标签
  tag?: string
  // 标签类型
  tagType?: "" | "success" | "info" | "warning" | "danger"
}

// 列表
export interface NotificationListOptions {
  title: string
  content: NotificationListItem[]
}
// 底部操作栏
export interface NotificationActionOptions {
  text: string
  icon?: string
}

评论