search

IDuxFE / idux

🚀 A UI Component Library for Vue3.x
https://idux.site
MIT License
552 stars 141 forks source link

[comp:notification] 通知消息提醒 #545

Closed typistZxd closed 3 years ago

typistZxd commented 3 years ago

What problem does this feature solve?

What does the proposed API look like?

Notification 通知提醒框

全局展示通知提醒信息。

API

IxNotification

NotificationProps
名称 说明 类型 默认值 全局配置 备注
v-model:visible 是否可见 boolean - - -
destroyOnHover 鼠标悬浮时是否允许销毁 boolean false √ -
duration 自动销毁的延时，单位毫秒 number 4500 √ -
icon 自定义通知图标 string \| VNode - √ -
closeIcon 自定义关闭图标 string \| VNode - - -
type 通知类型 'info' \| 'success' \| 'warning' \| 'error' info - -
key 唯一标识 string \| number \| symbol - - -
offset 通知消息弹出时，距离边缘的位置 number \| string 24 √ number时，单位为px；string时可为vh | vw | %
placement 弹出的位置，可选 topLeft \| topRight \| bottomLeft \| bottomRight string topRight √ -
title 通知的标题 string \| VNode - - 必填
content 通知的内容 string \| VNode - - 必填
footer 自定义底部按钮 string \| VNode \| ButtonProps[] - - 底部区域flex布局
onClose 关闭通知时触发的回调 () => void - - -

IxNotificationProvider

如果你想通过 useNotification 来创建通知，则你需要把组件包裹在 IxNotificationProvider 内部，因为这样才不会丢失应用的上下文信息。

NotificationProviderProps

全局的通知提醒配置，继承于NotificationProps

名称 说明 类型 默认值 全局配置 备注
maxCount 同一时间可展示的最大提示数量 number 5 √ -
useNotification

可以使用 useNotification 来快速创建和管理通知提醒信息。

export const useNotification: () => NotificationProviderRef;

export interface NotificationProviderRef {
  // 打开通知提醒
  open: (options: NotificationProps) => NotificationRef
  info: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  success: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  warning: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  error: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  // 更新指定 key 的通知的配置
  update: (key: VKey, options: Omit<NotificationProps, 'key'>) => void
  // 销毁指定 key 的通知信息
  destroy: (key: VKey | VKey[]) => void
  // 销毁所有通知信息
  destroyAll: () => void
}

export interface NotificationRef {
  // 通知提醒的唯一标识
  key: VKey
  // 更新当前配置信息
  update: (options: Partial<NotificationOptions>) => void
  // 销毁当前通知提醒
  destroy: () => void
}
NotificationSlot
名称 说明 参数类型 备注
title 通知的标题 - 优先级高于title配置
default 通知的内容 - 优先级高于content配置
footer 自定义底部按钮 - 优先级高于footer配置
typistZxd commented 3 years ago

offset区分verticalOffset （上下边缘距离）和horizontalOffset（左右边缘距离）

typistZxd commented 3 years ago

单独使用IxNotification组件，不存在offset、placement配置

danranVm commented 3 years ago

offset区分verticalOffset （上下边缘距离）和horizontalOffset（左右边缘距离）

offset 支持一下数组格式？

danranVm commented 3 years ago

单独使用IxNotification组件，不存在offset、placement配置

为什么？

typistZxd commented 3 years ago

offset区分verticalOffset （上下边缘距离）和horizontalOffset（左右边缘距离）

offset 支持一下数组格式？

可以

名称 说明 类型 默认值 全局配置 备注
offset 通知消息弹出时，距离边缘的位置 number | string|[number | string, number | string] 24 ☑️ number时：单位为px；
string时：可为vh或者%；
array时：[上下边缘，左右边缘]，设置为非array时上下边缘和左右边缘相等
typistZxd commented 3 years ago

单独使用IxNotification组件，不存在offset、placement配置

为什么？

保留这两个配置，但是在单独使用template时无效，建议采用useNotification。

单独使用notification组件的场景比较少，若单独使用，则需要每个组件都单独计算位置，还要避免和采用useNotification的弹窗出现位置冲突，更优的方式应该是统一对notification容器做定位。

如果是出于需要特殊场景样式覆盖，提供一个cls配置类名，由业务用此类名覆盖样式

typistZxd commented 3 years ago

placement修改如下： <!DOCTYPE html>

名称 说明 类型 默认值 全局配置 备注
placement 弹出的位置 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd' 'topEnd' ☑️ -
typistZxd commented 3 years ago

notification中onClose和onDestroy重复

typistZxd commented 3 years ago

最新API

globalConfig

全局的通知提醒配置

名称 说明 类型 默认值 备注
maxCount 同一时间可展示的最大提示数量 number 5 -
destroyOnHover 鼠标悬浮时是否允许销毁 boolean false -
duration 自动销毁的延时，单位毫秒 number 4500 -
icon 自定义通知图标映射表 Partial<Record<NotificationType, string \| VNode>> { success: 'check-circle', error: 'close-circle', info: 'info-circle', warning: 'exclamation-circle' } -
closeIcon 自定义关闭图标 string \| VNode 'close' -
offset 通知消息弹出时，距离边缘的位置 number \| string \|[number \| string, number \| string] 24 number时：单位为px；
string时：可为vh \ vw | % | px；
array时：[上下边缘，左右边缘]；
设置为非array时上下边缘和左右边缘相等
placement 弹出的位置 'topStart' \| 'topEnd' \| 'bottomStart' \| 'bottomEnd' 'topEnd' -

IxNotificationProvider

通过 useNotification 来创建通知，需要把组件包裹在 IxNotificationProvider 内部，因为这样才不会丢失应用的上下文信息。

NotificationProviderProps

名称 说明 类型 默认值 全局配置 备注
maxCount 同一时间可展示的最大提示数量 number 5 ☑️ -
offset 通知消息弹出时，距离边缘的位置 number \| string \|[number \| string, number \| string] 24 ☑️ number时：单位为px；
string时：可为vh或者%；
array时：[上下边缘，左右边缘]；
设置为非array时上下边缘和左右边缘相等		 
<!-- App.vue -->
<IxNotificationProvider>
  <MyComponent />
</IxNotificationProvider>

<!-- MyComponent.vue -->
<template>
  <IxButton @click="openNotification">Open</IxButton>
</template>

<script setup lang="ts">
import { useNotification } from '@idux/components/notification'

const notification = useNotification()
const openNotification = ()=> notification.info({
  title: 'info',
  content: 'this is a notification'
})
</script>

useNotification

可以使用 useNotification 来快速创建和管理通知提醒信息。

NotificationOption
名称 说明 类型 默认值 全局配置 备注
destroyOnHover 鼠标悬浮时是否允许销毁 boolean false ☑️ -
duration 自动销毁的延时，单位毫秒 number 4500 ☑️ -
icon 自定义通知图标 string \| VNode - - -
closeIcon 自定义关闭图标 string \| VNode - - -
type 通知类型 'info' \| 'success' \| 'warning' \| 'error' - - -
key 唯一标识 string \| number \| symbol - - -
placement 弹出的位置 'topStart' \| 'topEnd' \| 'bottomStart' \| 'bottomEnd' 'topEnd' ☑️ -
title 通知的标题 string \| VNode - - 必填
content 通知的内容 string \| VNode - - 必填
footer 自定义底部按钮 string \| VNode \| ButtonProps[] - - 底部区域flex布局
onDestroy 关闭通知时触发的回调 (key: VKey) => void - - - 
export const useNotification: () => NotificationProviderRef;

export interface NotificationProviderRef {
  // 打开通知提醒
  open: (options: NotificationProps) => NotificationRef
  info: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  success: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  warning: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  error: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  // 更新指定 key 的通知的配置
  update: (key: VKey, options: Omit<NotificationProps, 'key'>) => void
  // 销毁指定 key 的通知信息
  destroy: (key: VKey | VKey[]) => void
  // 销毁所有通知信息
  destroyAll: () => void
}

export interface NotificationRef {
  // 通知提醒的唯一标识
  key: VKey
  // 更新当前配置信息
  update: (options: Partial<NotificationOptions>) => void
  // 销毁当前通知提醒
  destroy: () => void
}