diff --git a/packages/vant/src/notify/Notify.tsx b/packages/vant/src/notify/Notify.tsx index 90900d385..9207dbd2e 100644 --- a/packages/vant/src/notify/Notify.tsx +++ b/packages/vant/src/notify/Notify.tsx @@ -8,7 +8,7 @@ import { } from '../utils'; import { Popup } from '../popup'; import { popupSharedProps } from '../popup/shared'; -import type { NotifyType } from './types'; +import type { NotifyType, NotifyPosition } from './types'; const [name, bem] = createNamespace('notify'); @@ -16,6 +16,7 @@ const notifyProps = extend({}, popupSharedProps, { type: makeStringProp('danger'), color: String, message: numericProp, + position: makeStringProp('top'), className: unknownProp, background: String, lockScroll: Boolean, @@ -42,7 +43,7 @@ export default defineComponent({ background: props.background, }} overlay={false} - position="top" + position={props.position} duration={0.2} lockScroll={props.lockScroll} onUpdate:show={updateShow} diff --git a/packages/vant/src/notify/README.md b/packages/vant/src/notify/README.md index b0bbc6e25..cddcf6cb7 100644 --- a/packages/vant/src/notify/README.md +++ b/packages/vant/src/notify/README.md @@ -42,6 +42,11 @@ Notify({ background: '#ffe1e1', }); +Notify({ + message: 'Custom Position', + position: 'bottom', +}); + Notify({ message: 'Custom Duration', duration: 1000, @@ -110,6 +115,7 @@ export default { | type | Can be set to `primary` `success` `warning` | _NotifyType_ | `danger` | | message | Message | _string_ | - | | duration | Duration(ms), won't disappear if value is 0 | _number \| string_ | `3000` | +| position `v3.3.8` | Position, can be set to `bottom` | _NotifyPosition_ | `top` | | color | Message color | _string_ | `white` | | background | Background color | _string_ | - | | className | Custom className | _string \| Array \| object_ | - | @@ -123,7 +129,12 @@ export default { The component exports the following type definitions: ```ts -import type { NotifyType, NotifyProps, NotifyOptions } from 'vant'; +import type { + NotifyType, + NotifyProps, + NotifyOptions, + NotifyPosition, +} from 'vant'; ``` ## Theming diff --git a/packages/vant/src/notify/README.zh-CN.md b/packages/vant/src/notify/README.zh-CN.md index 28e2ac85e..b6b182d2b 100644 --- a/packages/vant/src/notify/README.zh-CN.md +++ b/packages/vant/src/notify/README.zh-CN.md @@ -77,7 +77,7 @@ Notify({ type: 'warning', message: '通知内容' }); ### 自定义通知 -自定义消息通知的颜色和展示时长。 +自定义消息通知的颜色、位置和展示时长。 ```js Notify({ @@ -86,6 +86,11 @@ Notify({ background: '#ffe1e1', }); +Notify({ + message: '自定义位置', + position: 'bottom', +}); + Notify({ message: '自定义时长', duration: 1000, @@ -158,6 +163,7 @@ export default { | type | 类型,可选值为 `primary` `success` `warning` | _NotifyType_ | `danger` | | message | 展示文案,支持通过`\n`换行 | _string_ | - | | duration | 展示时长(ms),值为 0 时,notify 不会消失 | _number \| string_ | `3000` | +| position `v3.3.8` | 弹出位置,可选值为 `bottom` | _NotifyPosition_ | `top` | | color | 字体颜色 | _string_ | `white` | | background | 背景颜色 | _string_ | - | | className | 自定义类名 | _string \| Array \| object_ | - | @@ -171,7 +177,12 @@ export default { 组件导出以下类型定义: ```ts -import type { NotifyType, NotifyProps, NotifyOptions } from 'vant'; +import type { + NotifyType, + NotifyProps, + NotifyOptions, + NotifyPosition, +} from 'vant'; ``` ## 主题定制 diff --git a/packages/vant/src/notify/demo/index.vue b/packages/vant/src/notify/demo/index.vue index 2600ed712..f49ee4cb4 100644 --- a/packages/vant/src/notify/demo/index.vue +++ b/packages/vant/src/notify/demo/index.vue @@ -20,6 +20,7 @@ const t = useTranslate({ customNotify: '自定义配置', componentCall: '组件调用', customDuration: '自定义时长', + customPosition: '自定义位置', }, 'en-US': { primary: 'Primary', @@ -32,6 +33,7 @@ const t = useTranslate({ customNotify: 'Custom Notify', componentCall: 'Component Call', customDuration: 'Custom Duration', + customPosition: 'Custom Position', }, }); @@ -56,6 +58,13 @@ const showCustomDuration = () => { }); }; +const showCustomPosition = () => { + Notify({ + message: t('customPosition'), + position: 'bottom', + }); +}; + const showType = (type: NotifyType) => { Notify({ message: t('content'), @@ -85,6 +94,11 @@ const showComponentCall = () => { + ({ onClick: undefined, onOpened: undefined, duration: 3000, + position: undefined, className: '', lockScroll: false, background: undefined, diff --git a/packages/vant/src/notify/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/notify/test/__snapshots__/demo.spec.ts.snap index f9b023818..0ff23424a 100644 --- a/packages/vant/src/notify/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/notify/test/__snapshots__/demo.spec.ts.snap @@ -78,6 +78,18 @@ exports[`should render demo and match snapshot 1`] = ` +
+
+ + Custom Position + +
+ + +
}); await later(); - const notify = document.querySelector('.van-notify'); + const notify = document.querySelector('.van-notify') as HTMLElement; expect(notify.classList.contains('van-notify--success')).toBeTruthy(); }); test('should register component to app', () => { - const app = createApp(); + const app = createApp({}); app.use(Notify); expect(app.component(NotifyComponent.name)).toBeTruthy(); }); @@ -63,7 +63,18 @@ test('should call onClick option when clicked', async () => { }); await later(); - const notify = document.querySelector('.van-notify'); + const notify = document.querySelector('.van-notify') as HTMLElement; notify.click(); expect(onClick).toHaveBeenCalledTimes(1); }); + +test('should align to bottom when position option is bottom', async () => { + Notify({ + message: 'test', + position: 'bottom', + }); + + await later(); + const notify = document.querySelector('.van-notify') as HTMLElement; + expect(notify.classList.contains('van-popup--bottom')).toBeTruthy(); +}); diff --git a/packages/vant/src/notify/types.ts b/packages/vant/src/notify/types.ts index 661c2ddd1..08bec392f 100644 --- a/packages/vant/src/notify/types.ts +++ b/packages/vant/src/notify/types.ts @@ -4,11 +4,14 @@ export type NotifyMessage = string | number; export type NotifyType = 'primary' | 'success' | 'danger' | 'warning'; +export type NotifyPosition = 'top' | 'bottom'; + export type NotifyOptions = { type?: NotifyType; color?: string; message?: NotifyMessage; duration?: number; + position?: NotifyPosition; className?: unknown; background?: string; lockScroll?: boolean;