[bugfix] Toast: max width of text type (#2074)

packages/toast/demo/index.vue

@@ -1,7 +1,8 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-button @click="showToast">{{ $t('title1') }}</van-button>
+      <van-button @click="$toast($t('text'))">{{ $t('title1') }}</van-button>
+      <van-button @click="$toast($t('longText'))">{{ $t('longTextButton') }}</van-button>
     </demo-block>
 
     <demo-block :title="$t('title2')">
@@ -29,10 +30,12 @@ export default {
       title3: '成功/失败提示',
       success: '成功提示',
       fail: '失败提示',
-      text1: '我是提示文案，建议不超过十五字~',
+      text: '提示内容',
+      longText: '这是一条长文字提示，超过一定字数就会换行',
       text2: '成功文案',
       text3: '失败文案',
-      text4: second => `倒计时 ${second} 秒`
+      text4: second => `倒计时 ${second} 秒`,
+      longTextButton: '长文字提示'
     },
     'en-US': {
       title1: 'Text',
@@ -40,18 +43,16 @@ export default {
       title3: 'Success/Fail',
       success: 'Success',
       fail: 'Fail',
-      text1: 'Some messages',
+      text: 'Some messages',
+      longText: 'This is a long message, text will wrap when over a certain length',
       text2: 'Success',
       text3: 'Fail',
-      text4: second => `${second} seconds`
+      text4: second => `${second} seconds`,
+      longTextButton: 'Long Text'
     }
   },
 
   methods: {
-    showToast() {
-      this.$toast(this.$t('text1'));
-    },
-
     showLoadingToast() {
       this.$toast.loading({ mask: true, message: this.$t('loading') + '...' });
     },

packages/toast/index.less

@@ -6,8 +6,9 @@
   left: 50%;
   display: flex;
   color: @white;
-  font-size: 12px;
+  max-width: 80%;
-  line-height: 1.2;
+  font-size: 14px;
+  line-height: 20px;
   border-radius: 5px;
   word-break: break-all;
   align-items: center;
@@ -17,10 +18,11 @@
   transform: translate3d(-50%, -50%, 0);
   background-color: rgba(0, 0, 0, .7);
 
-  /**
+  // hack for avoid max-width when use left & fixed
-   * should not add pointer-events: none directly to body tag
+  width: fit-content; 
-   * that will cause unexpected tap-highlight-color in mobile safari
+
-   */
+  // should not add pointer-events: none directly to body tag
+  // that will cause unexpected tap-highlight-color in mobile safari
   &--unclickable {
     * {
       pointer-events: none;
@@ -28,8 +30,8 @@
   }
 
   &--text {
-    padding: 12px;
+    min-width: 120px;
-    min-width: 220px;
+    padding: 8px 12px;
   }
 
   &--default {

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

@@ -4,6 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <button class="van-button van-button--default van-button--normal"><span class="van-button__text">文字提示</span></button>
+    <button class="van-button van-button--default van-button--normal"><span class="van-button__text">长文字提示</span></button>
   </div>
   <div>
     <button class="van-button van-button--default van-button--normal"><span class="van-button__text">加载提示</span></button>

packages/toast/zh-CN.md

@@ -13,10 +13,9 @@ Vue.use(Toast);
 #### 文字提示
 
 ```javascript
-Toast('我是提示文案，建议不超过十五字~');
+Toast('提示内容');
 ```
 
-
 #### 加载提示
 
 ```javascript
@@ -26,7 +25,6 @@ Toast.loading({
 });
 ```
 
-
 #### 成功/失败提示
 
 ```javascript
@@ -34,7 +32,6 @@ Toast.success('成功文案');
 Toast.fail('失败文案');
 ```
 
-
 #### 高级用法
 
 ```javascript
@@ -81,7 +78,6 @@ toast1.clear();
 toast2.clear();
 ```
 
-
 ### 方法
 
 | 方法名 | 参数 | 返回值 | 介绍 |