[new feature] Toast: 支持图标展示 (#121)

* toast新增icon支持

* 补充readme

* 转义

example/pages/toast/index.js

@@ -5,5 +5,36 @@ Page(Object.assign({}, Zan.Toast, {
 
   showToast() {
     this.showZanToast('toast的内容');
+  },
+
+  showIconToast() {
+    this.showZanToast({
+      title: 'toast的内容',
+      icon: 'fail'
+    });
+  },
+
+  showImageToast() {
+    this.showZanToast({
+      title: 'toast的内容',
+      image: 'https://b.yzcdn.cn/v2/image/dashboard/secured_transaction/suc_green@2x.png'
+    });
+  },
+
+  showLoadingToast() {
+    this.showZanToast({
+      title: 'toast的内容',
+      icon: 'loading'
+    });
+  },
+
+  showOnlyIcon() {
+    this.showZanToast({
+      icon: 'fail'
+    });
+  },
+
+  showLoading() {
+    this.showZanLoading('加载中');
   }
 }));

example/pages/toast/index.wxml

@@ -4,10 +4,30 @@
 
   <view class="doc-title zan-hairline--bottom">TOAST</view>
 
-  <view class="zan-btns" style="margin-top: 30vh;">
+  <view class="zan-btns" style="margin-top: 15vh;">
     <button class="zan-btn" bindtap="showToast">
       显示toast
     </button>
+
+    <button class="zan-btn" bindtap="showIconToast">
+      显示 Icon 图标的toast
+    </button>
+
+    <button class="zan-btn" bindtap="showImageToast">
+      自定义图片作为图标的toast
+    </button>
+
+    <button class="zan-btn" bindtap="showLoadingToast">
+      显示 Loading toast
+    </button>
+
+    <button class="zan-btn" bindtap="showOnlyIcon">
+      只显示图标的toast
+    </button>
+
+    <button class="zan-btn" bindtap="showLoading">
+      显示 Loading
+    </button>
   </view>
 </view>
 

packages/toast/README.md

@@ -26,4 +26,39 @@ Page(extend({}, Toast, {
 在 js 中直接调用 this.showZanToast 即可
 ```js
 this.showZanToast('toast的内容');
+
+this.showZanToast({
+  title: 'toast的内容'
+});
 ```
+
+Toast 支持在文字上展示图标，用法如下
+```js
+this.showZanToast({
+  title: 'toast的内容',
+  // icon 仅支持 Icon 组件内提供的
+  icon: 'fail'
+});
+```
+
+Toast 组件扩展了一个 showZanLoading 的方法，快速展示加载中
+```js
+this.showZanLoading('toast的内容');
+```
+
+### 参数说明
+
+#### 方法
+| 方法名       | 参数      | 返回值       | 介绍       |
+|-----------|-----------|-----------|-------------|
+| showZanToast | `title \| options`, `timeout` | - | 展示提示 |
+| showZanLoading | `title \| options` | - | 展示加载提示 |
+| clearZanToast |  | - | 关闭提示 |
+
+#### options 具体参数如下
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| title | toast 显示文案 | String | - | |
+| icon | toast 显示图标，仅支持 Icon 组件内提供的和 `loading` | String | - | |
+| image | toast 显示图标，为图片的链接，传入此值后会覆盖 icon 值 | String | - | |
+| timeout | toast 显示时间，小于0则会一直显示，需要手动调用 clearZanToast 清除 | Number | - | |

packages/toast/index.js

@@ -1,32 +1,66 @@
 module.exports = {
   showZanToast(title, timeout) {
-    var zanToast = this.data.zanToast || {};
+    const options = formatParameter(title, timeout);
-    clearTimeout(zanToast.timer);
+
+    // 清除上一轮的计时器
+    const { timer = 0 } = this.data.zanToast || {};
+    clearTimeout(timer);
 
     // 弹层设置~
-    zanToast = {
+    const zanToast = {
       show: true,
-      title
+      icon: options.icon,
+      image: options.image,
+      title: options.title
     };
     this.setData({
       zanToast
     });
 
-    var timer = setTimeout(() => {
+    // 传入的显示时长小于0，就认为需要一直显示
+    if (timeout < 0) {
+      return;
+    }
+
+    // 下一轮计时器
+    const nextTimer = setTimeout(() => {
       this.clearZanToast();
     }, timeout || 3000);
 
     this.setData({
-      'zanToast.timer': timer
+      'zanToast.timer': nextTimer
     });
   },
 
+  // 清除所有 toast
   clearZanToast() {
-    var zanToast = this.data.zanToast || {};
+    const { timer = 0 } = this.data.zanToast || {};
-    clearTimeout(zanToast.timer);
+    clearTimeout(timer);
 
     this.setData({
       'zanToast.show': false
     });
+  },
+
+  // 快捷方法，显示 loading
+  showZanLoading(title) {
+    const options = formatParameter(title);
+
+    this.showZanToast({
+      ...options,
+      icon: 'loading'
+    });
   }
 };
+
+function formatParameter(title, timeout = 0) {
+  // 如果传入的 title 是对象，那么认为所有的配置属性都在这个对象中了
+  if (typeof title === 'object') {
+    return title;
+  }
+
+  return {
+    title,
+    timeout
+  };
+}

packages/toast/index.pcss

@@ -1,17 +1,48 @@
 .zan-toast {
   position: fixed;
   top: 35%;
-  left: 20%;
+  left: 50%;
-  transform: translateZ(0) translateY(-100%);
+  transform: translate3d(-50%, -50%, 0);
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
   font-size: 14px;
-  width: 60%;
   line-height: 1.5em;
   margin: 0 auto;
   box-sizing: border-box;
-  padding: 10px;
+  padding: 10px 18px;
   text-align: center;
   border-radius: 4px;
   z-index: 100;
 }
+
+/* 没有文字时，需要调整展示大小 */
+.zan-toast--notitle {
+  padding: 18px;
+}
+
+.zan-toast__icon {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  margin: 0 auto;
+  padding: 12px 15px;
+  font-size: 38px;
+  text-align: center;
+}
+
+/* 加载中的状态 */
+.zan-toast__icon-loading {
+  line-height: 0;
+}
+
+.zan-toast__icon-loading .zan-loading {
+  width: 40px;
+  height: 40px;
+}
+
+/* 自定义图标 */
+.zan-toast__icon-image {
+  background-size: 40px;
+  background-position: center;
+  background-repeat: no-repeat;
+}

packages/toast/index.wxml

@@ -1,3 +1,31 @@
 <template name="zan-toast">
-  <view class="zan-toast" wx:if="{{ zanToast.show }}" bindtap="clearZanToast">{{ zanToast.title }}</view>
+  <view
+    class="zan-toast {{ !zanToast.title ? 'zan-toast--notitle' : '' }}"
+    wx:if="{{ zanToast.show }}"
+    bindtap="clearZanToast"
+  >
+    <!-- icon 展示 -->
+    <block
+      wx:if="{{ zanToast.icon || zanToast.image }}"
+    >
+      <view
+        wx:if="{{ zanToast.image }}"
+        class="zan-toast__icon zan-toast__icon-image"
+        style="background-image: url({{ zanToast.image }});"
+      ></view>
+      <view
+        wx:elif="{{ zanToast.icon === 'loading' }}"
+        class="zan-toast__icon zan-toast__icon-loading"
+      >
+        <view class="zan-loading"></view>
+      </view>
+      <view
+        wx:else
+        class="zan-toast__icon zan-icon zan-icon-{{ zanToast.icon }}"
+      ></view>
+    </block>
+
+    <!-- 文案展示 -->
+    <view wx:if="{{ zanToast.title }}">{{ zanToast.title }}</view>
+  </view>
 </template>