feat(Notify): add teleport prop (#12556)

youzan · Jan 11, 2024 · 5cb8f32 · 5cb8f32
1 parent dbf8027
commit 5cb8f32
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 4 deletions.
diff --git 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<NotifyType>('danger'),
   color: String,
@@ -36,18 +45,15 @@ export default defineComponent({
 
     return () => (
       <Popup
-        show={props.show}
         class={[bem([props.type]), props.className]}
         style={{
           color: props.color,
           background: props.background,
         }}
         overlay={false}
-        zIndex={props.zIndex}
-        position={props.position}
         duration={0.2}
-        lockScroll={props.lockScroll}
         onUpdate:show={updateShow}
+        {...pick(props, popupInheritProps)}
       >
         {slots.default ? slots.default() : props.message}
       </Popup>

diff --git 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
@@ -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 | 自定义内容 |
+
 ### 类型定义
 
 组件导出以下类型定义：