[new feature] Toast: add icon prop (#3485)

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <img alt="logo" src="https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png" width="120" height="120" style="margin-bottom: 10px;">
+    <img alt="logo" src="https://img.yzcdn.cn/vant/logo.png" width="120" height="120" style="margin-bottom: 10px;">
 </p>
 
 <h3 align="center" style="margin: 30px 0 35px;">Mobile UI Components built on Vue</h3>

README.zh-CN.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <img alt="logo" src="https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png" width="120" style="margin-bottom: 10px;">
+    <img alt="logo" src="https://img.yzcdn.cn/vant/logo.png" width="120" style="margin-bottom: 10px;">
 </p>
 <h3 align="center" style="margin: 30px 0 35px;">轻量、可靠的移动端 Vue 组件库</h3>
 

docs/src/components/DemoList.vue

@@ -16,7 +16,7 @@
     </div>
 
     <h1 class="vant-title">
-      <img src="https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png" >
+      <img src="https://img.yzcdn.cn/vant/logo.png" >
       <span>Vant</span>
     </h1>
     <h2 class="vant-desc">{{ description }}</h2>

docs/src/doc.config.js

@@ -15,7 +15,7 @@ export default {
   'zh-CN': {
     header: {
       logo: {
-        image: 'https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png',
+        image: 'https://img.yzcdn.cn/vant/logo.png',
         title: 'Vant',
         href: '#/'
       },
@@ -349,7 +349,7 @@ export default {
     header: {
       logo: {
         image:
-          'https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png',
+          'https://img.yzcdn.cn/vant/logo.png',
         title: 'Vant',
         href: '#/'
       },

packages/style/var.less

@@ -552,7 +552,7 @@
 @toast-line-height: 20px;
 @toast-border-radius: 4px;
 @toast-background-color: rgba(@text-color, .88);
-@toast-icon-size: 48px;
+@toast-icon-size: 40px;
 @toast-text-min-width: 96px;
 @toast-text-padding: 8px 12px;
 @toast-default-padding: 15px;

packages/toast/Toast.js

@@ -4,12 +4,12 @@ import Icon from '../icon';
 import Loading from '../loading';
 
 const [sfc, bem] = use('toast');
-const STYLE = ['success', 'fail', 'loading'];
 
 export default sfc({
   mixins: [PopupMixin],
 
   props: {
+    icon: String,
     className: null,
     loadingType: String,
     forbidClick: Boolean,
@@ -62,6 +62,7 @@ export default sfc({
       }
     },
 
+    /* istanbul ignore next */
     onAfterEnter() {
       this.$emit('opened');
 
@@ -72,31 +73,43 @@ export default sfc({
   },
 
   render(h) {
-    const { type, message, loadingType } = this;
-    const style = STYLE.indexOf(type) !== -1 ? 'default' : type;
+    const { type, icon, message, loadingType } = this;
 
-    function Content() {
-      switch (style) {
-        case 'text':
-          return <div>{message}</div>;
-        case 'html':
-          return <div domPropsInnerHTML={message} />;
+    const hasIcon = icon || (type === 'success' || type === 'fail');
+
+    function ToastIcon() {
+      if (hasIcon) {
+        return <Icon class={bem('icon')} name={icon || type} />;
       }
 
-      return [
-        type === 'loading' ? (
-          <Loading color="white" type={loadingType} />
-        ) : (
-          <Icon class={bem('icon')} name={type} />
-        ),
-        isDef(message) && <div class={bem('text')}>{message}</div>
-      ];
+      if (type === 'loading') {
+        return <Loading class={bem('loading')} color="white" type={loadingType} />;
+      }
+    }
+
+    function Message() {
+      if (!isDef(message) || message === '') {
+        return;
+      }
+
+      if (type === 'html') {
+        return <div class={bem('text')} domPropsInnerHTML={message} />;
+      }
+
+      return <div class={bem('text')}>{message}</div>;
     }
 
     return (
       <transition name="van-fade" onAfterEnter={this.onAfterEnter}>
-        <div vShow={this.value} class={[bem([style, this.position]), this.className]}>
-          {Content()}
+        <div
+          vShow={this.value}
+          class={[
+            bem([this.position, { text: !hasIcon && type !== 'loading' }]),
+            this.className
+          ]}
+        >
+          {ToastIcon()}
+          {Message()}
         </div>
       </transition>
     );

packages/toast/demo/index.vue

@@ -39,6 +39,22 @@
       </van-button>
     </demo-block>
 
+    <demo-block :title="$t('customIcon')">
+      <van-button
+        type="primary"
+        @click="showIconToast"
+      >
+        {{ $t('customIcon') }}
+      </van-button>
+
+      <van-button
+        type="primary"
+        @click="showImageToast"
+      >
+        {{ $t('customImage') }}
+      </van-button>
+    </demo-block>
+
     <demo-block :title="$t('advancedUsage')">
       <van-button
         type="primary"
@@ -63,6 +79,8 @@ export default {
       longText: '这是一条长文字提示，超过一定字数就会换行',
       text2: '成功文案',
       text3: '失败文案',
+      customIcon: '自定义图标',
+      customImage: '展示图片',
       text4: second => `倒计时 ${second} 秒`,
       longTextButton: '长文字提示'
     },
@@ -76,6 +94,8 @@ export default {
       longText: 'This is a long message, text will wrap when over a certain length',
       text2: 'Success',
       text3: 'Fail',
+      customIcon: 'Custom Icon',
+      customImage: 'Custom Image',
       text4: second => `${second} seconds`,
       longTextButton: 'Long Text'
     }
@@ -94,6 +114,20 @@ export default {
       this.$toast.fail(this.$t('text3'));
     },
 
+    showIconToast() {
+      this.$toast({
+        message: this.$t('customIcon'),
+        icon: 'like-o'
+      });
+    },
+
+    showImageToast() {
+      this.$toast({
+        message: this.$t('customImage'),
+        icon: 'https://img.yzcdn.cn/vant/logo.png'
+      });
+    },
+
     showCustomizedToast() {
       const toast = this.$toast.loading({
         duration: 0,

packages/toast/en-US.md

@@ -32,6 +32,20 @@ Toast.success('Success');
 Toast.fail('Fail');
 ```
 
+### Custom Icon
+
+```js
+Toast({
+  text: 'Custom Icon',
+  icon: 'like-o'
+});
+
+Toast({
+  text: 'Custom Image',
+  icon: 'https://img.yzcdn.cn/vant/logo.png'
+});
+```
+
 ### Advanced Usage
 
 ```javascript
@@ -102,6 +116,7 @@ toast2.clear();
 | type | Can be set to `loading` `success` `fail` `html` | `String` | `text` |
 | position | Can be set to `top` `middle` `bottom` | `String` | `middle` |
 | message | Message | `String` | `''` |
+| icon | Custom icon | `String` | - |
 | mask | Whether to show mask | `Boolean` | `false` |
 | forbidClick | Whether to forbid click background | `Boolean` | `false` |
 | loadingType | Loading icon type, can be set to `spinner` | `String` | `circular` |

packages/toast/index.js

@@ -3,6 +3,7 @@ import VueToast from './Toast';
 import { isObj, isServer } from '../utils';
 
 const defaultOptions = {
+  icon: '',
   type: 'text',
   mask: false,
   value: true,

packages/toast/index.less

@@ -11,8 +11,10 @@
   box-sizing: content-box;
 
   // hack for avoid max-width when use left & fixed
-  width: fit-content;
+  width: @toast-default-width;
   max-width: @toast-max-width;
+  min-height: @toast-default-min-height;
+  padding: @toast-default-padding;
   color: @toast-text-color;
   font-size: @toast-font-size;
   line-height: @toast-line-height;
@@ -34,25 +36,13 @@
   }
 
   &--text {
+    width: fit-content;
     min-width: @toast-text-min-width;
+    min-height: unset;
     padding: @toast-text-padding;
-  }
-
-  &--default {
-    width: @toast-default-width;
-    min-height: @toast-default-min-height;
-    padding: @toast-default-padding;
-
-    .van-toast__icon {
-      font-size: @toast-icon-size;
-    }
-
-    .van-loading {
-      margin: 10px 0;
-    }
 
     .van-toast__text {
-      padding-top: 5px;
+      margin-top: 0;
     }
   }
 
@@ -64,4 +54,16 @@
     top: auto;
     bottom: @toast-position-bottom-distance;
   }
+
+  &__icon {
+    font-size: @toast-icon-size;
+  }
+
+  &__loading {
+    padding: 5px;
+  }
+
+  &__text {
+    margin-top: 10px;
+  }
 }

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

@@ -15,6 +15,11 @@ exports[`renders demo correctly 1`] = `
     </span></button> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">
       失败提示
     </span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      自定义图标
+    </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      展示图片
+    </span></button></div>
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       高级用法
     </span></button></div>

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

@@ -1,7 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`create a forbidClick toast 1`] = `
-<div class="van-toast van-toast--text van-toast--middle" style="display: none;" name="van-fade">
-  <div></div>
+<div class="van-toast van-toast--middle" style="z-index: 2000;" name="van-fade"><i class="van-icon van-icon-success van-toast__icon">
+    <!----></i></div>
+`;
+
+exports[`icon prop 1`] = `
+<div class="van-toast van-toast--middle" style="z-index: 2004;" name="van-fade"><i class="van-icon van-icon-star-o van-toast__icon">
+    <!----></i>
+  <div class="van-toast__text">Message</div>
+</div>
+`;
+
+exports[`show html toast 1`] = `
+<div class="van-toast van-toast--middle van-toast--text" style="z-index: 2003;" name="van-fade">
+  <div class="van-toast__text">
+    <div>Message</div>
+  </div>
+</div>
+`;
+
+exports[`show loading toast 1`] = `
+<div class="van-toast van-toast--middle" style="z-index: 2002;" name="van-fade">
+  <div class="van-loading van-loading--circular van-toast__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: white;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+  <div class="van-toast__text">Message</div>
 </div>
 `;

packages/toast/test/index.spec.js

@@ -11,6 +11,7 @@ test('create a forbidClick toast', async () => {
     type: 'success'
   });
 
+  await later();
   expect(toast.$el.outerHTML).toMatchSnapshot();
 
   await later();
@@ -30,6 +31,35 @@ it('toast disappeared after duration', async () => {
   expect(toast.$el.style.display).toEqual('none');
 });
 
+test('show loading toast', async () => {
+  const toast = Toast.loading({
+    message: 'Message'
+  });
+
+  await later();
+  expect(toast.$el.outerHTML).toMatchSnapshot();
+});
+
+test('show html toast', async () => {
+  const toast = Toast({
+    type: 'html',
+    message: '<div>Message</div>'
+  });
+
+  await later();
+  expect(toast.$el.outerHTML).toMatchSnapshot();
+});
+
+test('icon prop', async () => {
+  const toast = Toast({
+    message: 'Message',
+    icon: 'star-o'
+  });
+
+  await later();
+  expect(toast.$el.outerHTML).toMatchSnapshot();
+});
+
 test('clear toast', () => {
   const toast1 = Toast();
   expect(toast1.value).toBeTruthy();

packages/toast/zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 引入
 
-```javascript
+```js
 import { Toast } from 'vant';
 
 Vue.use(Toast);
@@ -12,13 +12,13 @@ Vue.use(Toast);
 
 ### 文字提示
 
-```javascript
+```js
 Toast('提示内容');
 ```
 
 ### 加载提示
 
-```javascript
+```js
 Toast.loading({
   mask: true,
   message: '加载中...'
@@ -27,14 +27,28 @@ Toast.loading({
 
 ### 成功/失败提示
 
-```javascript
+```js
 Toast.success('成功文案');
 Toast.fail('失败文案');
 ```
 
+### 自定义图标
+
+```js
+Toast({
+  text: '自定义图标',
+  icon: 'like-o'
+});
+
+Toast({
+  text: '展示图片',
+  icon: 'https://img.yzcdn.cn/vant/logo.png'
+});
+```
+
 ### 高级用法
 
-```javascript
+```js
 const toast = Toast.loading({
   duration: 0,       // 持续展示 toast
   forbidClick: true, // 禁用背景点击
@@ -102,6 +116,7 @@ toast2.clear();
 | type | 提示类型，可选值为 `loading` `success`<br>`fail` `html` | `String` | `text` | - |
 | position | 位置，可选值为 `top` `bottom` | `String` | `middle` | - |
 | message | 文本内容，支持通过`\n`换行 | `String` | `''` | - | - |
+| icon | 自定义图标，支持传入图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 2.0.1 |
 | mask | 是否显示背景遮罩层 | `Boolean` | `false` | - |
 | forbidClick | 是否禁止背景点击 | `Boolean` | `false` | - |
 | loadingType | 加载图标类型, 可选值为 `spinner` | `String` | `circular` | 1.1.3 |

types/toast.d.ts

@@ -4,6 +4,7 @@ import { VanPopupMixin } from './mixins/popup';
 type ToastMessage = string | number;
 
 export type ToastOptions = {
+  icon?: string;
   type?: string;
   mask?: boolean;
   position?: string;