feat(Notify): add position prop (#10056)

* feat(Notify): add position prop

* chore: update

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<NotifyType>('danger'),
   color: String,
   message: numericProp,
+  position: makeStringProp<NotifyPosition>('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}

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

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';
 ```
 
 ## 主题定制

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 = () => {
 
   <demo-block card :title="t('customNotify')">
     <van-cell is-link :title="t('customColor')" @click="showCustomColor" />
+    <van-cell
+      is-link
+      :title="t('customPosition')"
+      @click="showCustomPosition"
+    />
     <van-cell
       is-link
       :title="t('customDuration')"

packages/vant/src/notify/function-call.tsx

@@ -54,6 +54,7 @@ const getDefaultOptions = (): NotifyOptions => ({
   onClick: undefined,
   onOpened: undefined,
   duration: 3000,
+  position: undefined,
   className: '',
   lockScroll: false,
   background: undefined,

packages/vant/src/notify/test/__snapshots__/demo.spec.ts.snap

@@ -78,6 +78,18 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
+  <div class="van-cell van-cell--clickable"
+       role="button"
+       tabindex="0"
+  >
+    <div class="van-cell__title">
+      <span>
+        Custom Position
+      </span>
+    </div>
+    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    </i>
+  </div>
   <div class="van-cell van-cell--clickable"
        role="button"
        tabindex="0"

packages/vant/src/notify/test/index.spec.ts

@@ -20,12 +20,12 @@ test('should add "van-notify--success" class when type is success', async () =>
   });
 
   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();
+});

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;