feat(Notify): add new prop top (#3018)

fix #2764

packages/notify/README.md

@@ -1,6 +1,7 @@
 # Notify 消息提示
 
 ### 引入
+
 在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
 
 ```json
@@ -79,22 +80,23 @@ Notify({
 ### 方法
 
 | 方法名       | 说明     | 参数                | 返回值      |
-|------|------|------|------|
+| ------------ | -------- | ------------------- | ----------- |
 | Notify       | 展示提示 | `options | message` | notify 实例 |
 | Notify.clear | 关闭提示 | `options`           | `void`      |
 
 ### Options
 
 | 参数             | 说明                                                   | 类型       | 默认值       | 版本  |
-|-----------|-----------|-----------|-------------|-------------|
+| ---------------- | ------------------------------------------------------ | ---------- | ------------ | ----- |
-| type | 类型，可选值为 `primary` `success` `warning` | *string* | `danger` | 1.0.0 |
+| type             | 类型，可选值为 `primary` `success` `warning`           | _string_   | `danger`     | 1.0.0 |
-| message | 展示文案，支持通过`\n`换行 | *string* | 1.0.0 | - |
+| message          | 展示文案，支持通过`\n`换行                             | _string_   | 1.0.0        | -     |
-| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | *number* | `3000` | - |
+| duration         | 展示时长(ms)，值为 0 时，notify 不会消失               | _number_   | `3000`       | -     |
-| selector | 自定义节点选择器 | *string* | `van-notify` | - |
+| selector         | 自定义节点选择器                                       | _string_   | `van-notify` | -     |
-| color | 字体颜色 | *string* | `#fff` | - |
+| color            | 字体颜色                                               | _string_   | `#fff`       | -     |
-| background | 背景颜色 | *string* | - | - |
+| top              | 顶部距离                                               | _number_   | `0`          | -     |
-| context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | *object* | 当前页面 | - |
+| background       | 背景颜色                                               | _string_   | -            | -     |
-| onClick | 点击时的回调函数 | *Function* | - | - |
+| context          | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | _object_   | 当前页面     | -     |
-| onOpened | 完全展示后的回调函数 | *Function* | - | - |
+| onClick          | 点击时的回调函数                                       | _Function_ | -            | -     |
-| onClose | 关闭时的回调函数 | *Function* | - | - |
+| onOpened         | 完全展示后的回调函数                                   | _Function_ | -            | -     |
-| safeAreaInsetTop | 是否留出顶部安全距离（状态栏高度） | *boolean* | `false` | - |
+| onClose          | 关闭时的回调函数                                       | _Function_ | -            | -     |
+| safeAreaInsetTop | 是否留出顶部安全距离（状态栏高度）                     | _boolean_  | `false`      | -     |

packages/notify/index.ts

@@ -26,7 +26,8 @@ VantComponent({
     safeAreaInsetTop: {
       type: Boolean,
       value: false
-    }
+    },
+    top: null
   },
 
   data: {

packages/notify/index.wxml

@@ -1,8 +1,10 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <van-transition
   name="slide-down"
   show="{{ show }}"
   custom-class="van-notify__container"
-  custom-style="z-index: {{ zIndex }};"
+  custom-style="z-index: {{ zIndex }}; top: {{ utils.addUnit(top) }}"
   bind:tap="onTap"
 >
   <view
@@ -12,7 +14,7 @@
     <view
       wx:if="{{ safeAreaInsetTop }}"
       style="height: {{ statusBarHeight }}px"
-    ></view>
+    />
     <text>{{ message }}</text>
   </view>
 </van-transition>

packages/notify/notify.ts

@@ -4,6 +4,7 @@ interface NotifyOptions {
   type?: 'primary' | 'success' | 'danger' | 'warning';
   color?: string;
   zIndex?: number;
+  top?: number;
   message: string;
   context?: any;
   duration?: number;
@@ -22,6 +23,7 @@ const defaultOptions = {
   background: '',
   duration: 3000,
   zIndex: 110,
+  top: 0,
   color: WHITE,
   safeAreaInsetTop: false,
   onClick: () => {},