style(Toast): adjust top position (#7044)

src/style/var.less

@@ -806,8 +806,8 @@
 @toast-default-padding: @padding-md;
 @toast-default-width: 88px;
 @toast-default-min-height: 88px;
-@toast-position-top-distance: 50px;
-@toast-position-bottom-distance: 50px;
+@toast-position-top-distance: 20%;
+@toast-position-bottom-distance: 20%;
 
 // TreeSelect
 @tree-select-font-size: @font-size-md;

src/toast/README.md

@@ -53,6 +53,20 @@ Toast.loading({
 });
 ```
 
+### Custom Position
+
+```js
+Toast({
+  message: 'Top',
+  position: 'top',
+});
+
+Toast({
+  message: 'Bottom',
+  position: 'bottom',
+});
+```
+
 ### Update Message
 
 ```js

src/toast/README.zh-CN.md

@@ -64,6 +64,22 @@ Toast.loading({
 });
 ```
 
+### 自定义位置
+
+Toast 默认渲染在屏幕正中位置，通过 `position` 属性可以控制 Toast 展示的位置。
+
+```js
+Toast({
+  message: '顶部展示',
+  position: 'top',
+});
+
+Toast({
+  message: '底部展示',
+  position: 'bottom',
+});
+```
+
 ### 动态更新提示
 
 执行 Toast 方法时会返回对应的 Toast 实例，通过修改实例上的 message 属性可以实现动态更新提示的效果。

src/toast/demo/index.vue

@@ -17,6 +17,11 @@
       />
     </demo-block>
 
+    <demo-block card v-if="!isWeapp" :title="t('customPosition')">
+      <van-cell is-link :title="t('positionTop')" @click="showTopToast" />
+      <van-cell is-link :title="t('positionBottom')" @click="showBottomToast" />
+    </demo-block>
+
     <demo-block card :title="t('updateMessage')">
       <van-cell
         is-link
@@ -31,34 +36,40 @@
 export default {
   i18n: {
     'zh-CN': {
-      title1: '文字提示',
-      title2: '加载提示',
-      title3: '成功/失败提示',
-      success: '成功提示',
       fail: '失败提示',
       text: '提示内容',
       text2: '成功文案',
       text3: '失败文案',
+      text4: (second) => `倒计时 ${second} 秒`,
+      title1: '文字提示',
+      title2: '加载提示',
+      title3: '成功/失败提示',
+      success: '成功提示',
       customIcon: '自定义图标',
       customImage: '自定义图片',
-      text4: (second) => `倒计时 ${second} 秒`,
-      updateMessage: '动态更新提示',
       loadingType: '自定义加载图标',
+      positionTop: '顶部展示',
+      updateMessage: '动态更新提示',
+      positionBottom: '底部展示',
+      customPosition: '自定义位置',
     },
     'en-US': {
-      title1: 'Text',
-      title2: 'Loading',
-      title3: 'Success/Fail',
-      success: 'Success',
       fail: 'Fail',
       text: 'Some messages',
       text2: 'Success',
       text3: 'Fail',
+      text4: (second) => `${second} seconds`,
+      title1: 'Text',
+      title2: 'Loading',
+      title3: 'Success/Fail',
+      success: 'Success',
       customIcon: 'Custom Icon',
       customImage: 'Custom Image',
-      text4: (second) => `${second} seconds`,
-      updateMessage: 'Update Message',
       loadingType: 'Loading Type',
+      positionTop: 'Top',
+      updateMessage: 'Update Message',
+      positionBottom: 'Bottom',
+      customPosition: 'Custom Position',
     },
   },
 
@@ -79,6 +90,20 @@ export default {
       this.$toast.fail(this.t('text3'));
     },
 
+    showTopToast() {
+      this.$toast({
+        message: this.t('positionTop'),
+        position: 'top',
+      });
+    },
+
+    showBottomToast() {
+      this.$toast({
+        message: this.t('positionBottom'),
+        position: 'bottom',
+      });
+    },
+
     showIconToast() {
       this.$toast({
         message: this.t('customIcon'),

src/toast/test/__snapshots__/demo.spec.js.snap

@@ -34,6 +34,16 @@ exports[`renders demo correctly 1`] = `
         <!----></i>
     </div>
   </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>顶部展示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>底部展示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
   <div>
     <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>动态更新提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">