diff --git a/packages/vant/src/notify/Notify.tsx b/packages/vant/src/notify/Notify.tsx index 93356bd2a..53503edb0 100644 --- a/packages/vant/src/notify/Notify.tsx +++ b/packages/vant/src/notify/Notify.tsx @@ -1,5 +1,6 @@ import { defineComponent, type ExtractPropTypes } from 'vue'; import { + pick, extend, numericProp, unknownProp, @@ -12,6 +13,14 @@ import type { NotifyType, NotifyPosition } from './types'; const [name, bem] = createNamespace('notify'); +const popupInheritProps = [ + 'lockScroll', + 'position', + 'show', + 'teleport', + 'zIndex', +] as const; + export const notifyProps = extend({}, popupSharedProps, { type: makeStringProp('danger'), color: String, @@ -36,18 +45,15 @@ export default defineComponent({ return () => ( {slots.default ? slots.default() : props.message} diff --git a/packages/vant/src/notify/README.md b/packages/vant/src/notify/README.md index 0caaf6ff8..cec42e65a 100644 --- a/packages/vant/src/notify/README.md +++ b/packages/vant/src/notify/README.md @@ -122,6 +122,8 @@ Vant exports following Notify utility functions: ### NotifyOptions +When calling the `showNotify` and other related methods, the following options are supported: + | Attribute | Description | Type | Default | | --- | --- | --- | --- | | type | Can be set to `primary` `success` `warning` | _NotifyType_ | `danger` | @@ -133,10 +135,46 @@ Vant exports following Notify utility functions: | background | Background color | _string_ | - | | className | Custom className | _string \| Array \| object_ | - | | lockScroll | Whether to lock background scroll | _boolean_ | `false` | +| teleport | Specifies a target element where Notify will be mounted | _string \| Element_ | - | | onClick | Callback function after click | _(event: MouseEvent) => void_ | - | | onOpened | Callback function after opened | _() => void_ | - | | onClose | Callback function after close | _() => void_ | - | +### Props + +When using `Notify` as a component, the following props are supported: + +| Attribute | Description | Type | Default | +| --- | --- | --- | --- | +| v-model:show | Whether to show notify | _boolean_ | `false` | +| type | Can be set to `primary` `success` `warning` | _NotifyType_ | `danger` | +| message | Message | _string_ | - | +| z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` | +| position | Position, can be set to `bottom` | _NotifyPosition_ | `top` | +| color | Message color | _string_ | `white` | +| background | Background color | _string_ | - | +| class-name | Custom className | _string \| Array \| object_ | - | +| lock-scroll | Whether to lock background scroll | _boolean_ | `false` | +| teleport | Specifies a target element where Notify will be mounted | _string \| Element_ | - | + +### Events + +When using `Notify` as a component, the following events are supported: + +| Event | Description | Parameters | +| ------ | ------------------------------ | ------------------- | +| click | Callback function after click | _event: MouseEvent_ | +| close | Callback function after close | - | +| opened | Callback function after opened | - | + +### Slots + +When using `Notify` as a component, the following slots are supported: + +| Name | Description | +| ------- | -------------- | +| default | Custom content | + ### Types The component exports the following type definitions: diff --git a/packages/vant/src/notify/README.zh-CN.md b/packages/vant/src/notify/README.zh-CN.md index 6889647b1..f7c5f396b 100644 --- a/packages/vant/src/notify/README.zh-CN.md +++ b/packages/vant/src/notify/README.zh-CN.md @@ -148,10 +148,46 @@ Vant 中导出了以下 Notify 相关的辅助函数: | background | 背景颜色 | _string_ | - | | className | 自定义类名 | _string \| Array \| object_ | - | | lockScroll | 是否锁定背景滚动 | _boolean_ | `false` | +| teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - | | onClick | 点击时的回调函数 | _(event: MouseEvent): void_ | - | | onOpened | 完全展示后的回调函数 | _() => void_ | - | | onClose | 关闭时的回调函数 | _() => void_ | - | +### Props + +通过组件调用 `Notify` 时,支持以下 Props: + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| v-model:show | 是否显示通知 | _boolean_ | `false` | +| type | 类型,可选值为 `primary` `success` `warning` | _NotifyType_ | `danger` | +| message | 展示文案,支持通过`\n`换行 | _string_ | - | +| z-index | 将组件的 z-index 层级设置为一个固定值 | _number \| string_ | `2000+` | +| position | 弹出位置,可选值为 `bottom` | _NotifyPosition_ | `top` | +| color | 字体颜色 | _string_ | `white` | +| background | 背景颜色 | _string_ | - | +| class-name | 自定义类名 | _string \| Array \| object_ | - | +| lock-scroll | 是否锁定背景滚动 | _boolean_ | `false` | +| teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - | + +### Events + +通过组件调用 `Notify` 时,支持以下事件: + +| 事件名 | 说明 | 回调参数 | +| ------ | -------------------- | ------------------- | +| click | 点击时的回调函数 | _event: MouseEvent_ | +| close | 关闭时的回调函数 | - | +| opened | 完全展示后的回调函数 | - | + +### Slots + +通过组件调用 `Notify` 时,支持以下插槽: + +| 名称 | 说明 | +| ------- | ---------- | +| default | 自定义内容 | + ### 类型定义 组件导出以下类型定义: