Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Notify): add teleport prop #12556

Merged
merged 2 commits into from
Jan 11, 2024
Merged

feat(Notify): add teleport prop #12556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
14f45af
feat(Notify): add teleport prop
inottn Jan 8, 2024
ac077e2
docs: update content
inottn Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 10 additions & 4 deletions packages/vant/src/notify/Notify.tsx
View file
Open in desktop
@@ -1,5 +1,6 @@
import { defineComponent, type ExtractPropTypes } from 'vue';
import {
pick,
extend,
numericProp,
unknownProp,
Expand All @@ -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,
Expand All @@ -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>
Expand Down
38 changes: 38 additions & 0 deletions packages/vant/src/notify/README.md
View file
Open in desktop
Expand Up @@ -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` |
Expand All @@ -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:
Expand Down
36 changes: 36 additions & 0 deletions packages/vant/src/notify/README.zh-CN.md
View file
Open in desktop
Expand Up @@ -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 | 自定义内容 |

### 类型定义

组件导出以下类型定义：
Expand Down