Notification Card: A Customizable Notification Management System

应用场景

在现代应用程序中，通知管理是一个至关重要的功能。它允许用户根据自己的喜好接收有关重要事件、更新和促销的通知。Notification Card 组件为应用程序提供了一个易于使用且高度可定制的通知管理系统，使开发人员能够轻松地将通知功能集成到他们的应用程序中。

基本功能

Notification Card 组件提供了一系列基本功能，包括：

多类别通知分组：将通知组织到不同的类别中，例如社交、促销和订单，以提高可读性。
通知启用/禁用开关：允许用户根据需要启用或禁用每个通知类别。
全部启用/禁用开关：提供一个方便的选项，可以一次启用或禁用所有通知类别。
保存更改按钮：允许用户应用对通知设置所做的更改。

功能实现步骤及关键代码分析

1. 数据绑定

Notification Card 组件使用 Vue.js 的 ref API 来管理组件数据。enableAll 变量用于控制所有通知类别的启用状态，而 socialNotifications、promosAndOffers 和 ordersAndPurchases 变量则用于存储每个类别的通知数据。

const enableAll = ref(true);
const socialNotifications = ref([
  {
    id: 1,
    avatar: 'https://source.unsplash.com/random/32x32',
    title: 'Social Notifications',
    enable: true,
  },
]);

2. 模板结构

组件模板使用 Vue.js 的 JSX 语法定义。它包括一个带有标题和启用/禁用开关的头部，以及三个 a-list 组件，每个组件用于显示一个通知类别。

<template>
  <div class="bg-gray-100 h-screen">
    <div class="flex justify-between items-center px-4 py-3 border-b border-gray-200">
      <div class="text-lg font-semibold text-gray-900">Notification</div>
      <a-switch
        v-model="enableAll"
        :checked-children="enableAll ? 'Enable All' : 'Disable All'"
        :un-checked-children="enableAll ? 'Disable All' : 'Enable All'"
        class="ml-auto"
      />
    </div>
    <div class="mt-4">
      <a-list
        :dataSource="socialNotifications"
        renderItem="item"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            ...
          </a-list-item>
        </template>
      </a-list>
      ...
    </div>
    <div class="mt-4 flex justify-center">
      <a-button type="primary">Save Changes</a-button>
    </div>
  </div>
</template>

3. 通知类别循环

每个 a-list 组件使用 renderItem 属性来循环每个通知类别的数据。循环中，一个 a-list-item 组件被创建，它包含通知的头像、标题、启用/禁用开关和描述。

<template #renderItem="{ item }">
  <a-list-item>
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <a-avatar
          :src="item.avatar"
          size="small"
          class="mr-2"
        />
        <div class="text-gray-900 font-semibold">
          {item.title}
        </div>
      </div>
      <a-switch
        v-model="item.enable"
        :checked-children="item.enable ? 'On' : 'Off'"
        :un-checked-children="item.enable ? 'Off' : 'On'"
      />
    </div>
    <div class="text-gray-600 text-sm">
      ...
    </div>
  </a-list-item>
</template>

4. 全部启用/禁用

enableAll 变量用于控制所有通知类别的启用状态。当用户点击全部启用/禁用开关时，enableAll 的值将被取反，并且每个通知类别中的 enable 属性将相应地更新。

const enableAll = ref(true);
watch(enableAll, (newValue) => {
  socialNotifications.value.forEach((item) => (item.enable = newValue));
  promosAndOffers.value.forEach((item) => (item.enable = newValue));
  ordersAndPurchases.value.forEach((item) => (item.enable = newValue));
});