From 1d7c23b2893ac69480b6cc9c3430de2bad98255a Mon Sep 17 00:00:00 2001 From: Yao Date: Thu, 12 Apr 2018 21:58:54 +0800 Subject: [PATCH] =?UTF-8?q?[refactor]=20Toast:=20=E5=8D=87=E7=BA=A7?= =?UTF-8?q?=E4=B8=BA=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6=20(#191)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * toast 组件初始化 * toast 增加示例 && 逻辑补全 * toast 支持直接 loading 调用 * 增加 toast readme * 去除多余的引用 --- example/pages/toast/index.js | 40 ++++++---- example/pages/toast/index.json | 6 +- example/pages/toast/index.wxml | 27 +++---- packages/common/pop-manager/index.js | 6 ++ packages/common/pop-manager/index.wxml | 3 +- packages/dialog/index.wxml | 1 - packages/icon/index.js | 1 - packages/index.js | 18 +---- packages/popup/index.wxml | 2 +- packages/tab/index.pcss | 2 +- packages/toast/README.md | 61 +++++++-------- packages/toast/index.js | 100 +++++++++---------------- packages/toast/index.json | 6 ++ packages/toast/index.pcss | 11 +++ packages/toast/index.wxml | 55 +++++++------- packages/toast/toast.js | 60 +++++++++++++++ 16 files changed, 223 insertions(+), 176 deletions(-) create mode 100644 packages/toast/index.json create mode 100644 packages/toast/toast.js diff --git a/example/pages/toast/index.js b/example/pages/toast/index.js index 5af2ae41..211e722d 100644 --- a/example/pages/toast/index.js +++ b/example/pages/toast/index.js @@ -1,40 +1,50 @@ -const Zan = require('../../dist/index'); +const Toast = require('../../dist/toast/toast'); -Page(Object.assign({}, Zan.Toast, { +Page({ data: {}, showToast() { - this.showZanToast('toast的内容'); + Toast({ + message: 'toast的内容', + selector: '#zan-toast-test' + }) }, showIconToast() { - this.showZanToast({ - title: 'toast的内容', - icon: 'fail' + Toast({ + type: 'fail', + message: 'toast的内容', + selector: '#zan-toast-test' }); }, showImageToast() { - this.showZanToast({ - title: 'toast的内容', + Toast({ + message: 'toast的内容', + selector: '#zan-toast-test', image: 'https://b.yzcdn.cn/v2/image/dashboard/secured_transaction/suc_green@2x.png' }); }, showLoadingToast() { - this.showZanToast({ - title: 'toast的内容', - icon: 'loading' + Toast({ + type: 'loading', + message: 'toast的内容', + selector: '#zan-toast-test' }); }, showOnlyIcon() { - this.showZanToast({ - icon: 'fail' + Toast({ + type: 'fail', + selector: '#zan-toast-test' }); }, showLoading() { - this.showZanLoading('加载中'); + Toast.loading({ + message: '加载中', + selector: '#zan-toast-test' + }); } -})); +}); diff --git a/example/pages/toast/index.json b/example/pages/toast/index.json index 70a49464..4c395287 100644 --- a/example/pages/toast/index.json +++ b/example/pages/toast/index.json @@ -1,3 +1,7 @@ { - "navigationBarTitleText": "Toast 轻提示" + "navigationBarTitleText": "Toast 轻提示", + "usingComponents": { + "zan-button": "../../dist/btn/index", + "zan-toast": "../../dist/toast/index" + } } diff --git a/example/pages/toast/index.wxml b/example/pages/toast/index.wxml index 3e819c62..f309f5c3 100644 --- a/example/pages/toast/index.wxml +++ b/example/pages/toast/index.wxml @@ -5,30 +5,31 @@ TOAST - + - + - + - + - + - + - + + diff --git a/packages/common/pop-manager/index.js b/packages/common/pop-manager/index.js index 26e392a8..edbd9966 100644 --- a/packages/common/pop-manager/index.js +++ b/packages/common/pop-manager/index.js @@ -4,10 +4,16 @@ Component({ type: Boolean, value: false }, + // 是否有遮罩层 overlay: { type: Boolean, value: true }, + // 遮罩层是否会显示 + showOverlay: { + type: Boolean, + value: true + }, // 内容从哪个方向出，可选 center top bottom left right type: { type: String, diff --git a/packages/common/pop-manager/index.wxml b/packages/common/pop-manager/index.wxml index 55602556..6bb47ef1 100644 --- a/packages/common/pop-manager/index.wxml +++ b/packages/common/pop-manager/index.wxml @@ -2,7 +2,8 @@ class="pop pop--{{ type }} {{ show ? 'pop--show' : '' }}" > diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml index 5fd4a5a5..019d17c5 100644 --- a/packages/dialog/index.wxml +++ b/packages/dialog/index.wxml @@ -1,7 +1,6 @@ diff --git a/packages/tab/index.pcss b/packages/tab/index.pcss index c0d492fa..15984d8b 100644 --- a/packages/tab/index.pcss +++ b/packages/tab/index.pcss @@ -16,7 +16,7 @@ .zan-tab__item { flex: 1; display: inline-block; - padding: 0 10px; + padding: 0 5px; line-height: 0; box-sizing: border-box; overflow: hidden; diff --git a/packages/toast/README.md b/packages/toast/README.md index cb3a40a7..140caa9b 100644 --- a/packages/toast/README.md +++ b/packages/toast/README.md @@ -1,64 +1,53 @@ ## Toast 轻提示 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; +在 json 文件中配置 toast 组件 +```json +"usingComponents": { + "zan-toast": "/path/to/zanui-weapp/dist/toast/index" +} ``` 在需要使用的页面里引入组件库模板和脚本 ```html - - - - + ``` ```js -const { Toast, extend } = require('path/to/zanui-weapp/dist/index'); +const Toast = require('path/to/zanui-weapp/dist/toast/toast'); -// 在 Page 中混入 Toast 里面声明的方法 -Page(extend({}, Toast, { +Page({ // ... -})); -``` - -### 代码演示 -在 js 中直接调用 this.showZanToast 即可 -```js -this.showZanToast('toast的内容'); - -this.showZanToast({ - title: 'toast的内容' + // 可以在任意方法里直接调用，即可唤起 + handleClick() { + Toast({ + message: 'toast me', + selector: '#zan-toast-test' + }); + } }); ``` -Toast 支持在文字上展示图标，用法如下 +#### 加载提示 ```js -this.showZanToast({ - title: 'toast的内容', - // icon 仅支持 Icon 组件内提供的 - icon: 'fail' +Toast.loading({ + selector: '#zan-toast-test' }); ``` -Toast 组件扩展了一个 showZanLoading 的方法，快速展示加载中 -```js -this.showZanLoading('toast的内容'); -``` - ### 参数说明 #### 方法 | 方法名 | 参数 | 返回值 | 介绍 | |-----------|-----------|-----------|-------------| -| showZanToast | `title \| options`, `timeout` | - | 展示提示 | -| showZanLoading | `title \| options` | - | 展示加载提示 | -| clearZanToast | | - | 关闭提示 | +| Toast | `options`, `timeout` | - | 展示提示 | +| Toast.loading | `options` | - | 展示加载提示 | +| Toast.clear | - | - | 关闭提示 | #### options 具体参数如下 -| 参数 | 说明 | 类型 | 默认值 | 必须 | +| 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| title | toast 显示文案 | String | - | | -| icon | toast 显示图标，仅支持 Icon 组件内提供的和 `loading` | String | - | | +| message | toast 显示文案 | String | - | | +| type | 提示类型 | String | - | loading success fail | +| icon | toast 显示图标，可以用 icon 里面支持的所有图标 | String | - | - | | image | toast 显示图标，为图片的链接，传入此值后会覆盖 icon 值 | String | - | | | timeout | toast 显示时间，小于0则会一直显示，需要手动调用 clearZanToast 清除 | Number | - | | diff --git a/packages/toast/index.js b/packages/toast/index.js index 56e8c82f..a5ba4e7d 100644 --- a/packages/toast/index.js +++ b/packages/toast/index.js @@ -1,66 +1,40 @@ -module.exports = { - showZanToast(title, timeout) { - const options = formatParameter(title, timeout); - - // 清除上一轮的计时器 - const { timer = 0 } = this.data.zanToast || {}; - clearTimeout(timer); - - // 弹层设置~ - const zanToast = { - show: true, - icon: options.icon, - image: options.image, - title: options.title - }; - this.setData({ - zanToast - }); - - // 传入的显示时长小于0，就认为需要一直显示 - if (timeout < 0) { - return; - } - - // 下一轮计时器 - const nextTimer = setTimeout(() => { - this.clearZanToast(); - }, timeout || 3000); - - this.setData({ - 'zanToast.timer': nextTimer - }); - }, - - // 清除所有 toast - clearZanToast() { - const { timer = 0 } = this.data.zanToast || {}; - clearTimeout(timer); - - this.setData({ - 'zanToast.show': false - }); - }, - - // 快捷方法，显示 loading - showZanLoading(title) { - const options = formatParameter(title); - - this.showZanToast({ - ...options, - icon: 'loading' - }); - } +const DEFAULT_DATA = { + show: false, + message: '', + icon: '', + image: '', + mask: false }; -function formatParameter(title, timeout = 0) { - // 如果传入的 title 是对象，那么认为所有的配置属性都在这个对象中了 - if (typeof title === 'object') { - return title; - } +const SUPPORT_TYPE = ['loading', 'success', 'fail']; - return { - title, - timeout - }; -} +Component({ + data: { + ...DEFAULT_DATA + }, + + methods: { + show(options) { + const toastOptions = { ...options }; + + let icon = options.icon || ''; + let image = options.image || ''; + if (SUPPORT_TYPE.indexOf(options.type) > -1) { + icon = options.type; + image = ''; + } + + this.setData({ + ...toastOptions, + icon, + image + }); + }, + + clear() { + this.setData({ + ...DEFAULT_DATA + }); + } + } +}); diff --git a/packages/toast/index.json b/packages/toast/index.json new file mode 100644 index 00000000..fc0d0bf9 --- /dev/null +++ b/packages/toast/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "zan-icon": "../icon/index" + } +} diff --git a/packages/toast/index.pcss b/packages/toast/index.pcss index bab8976b..ee286509 100644 --- a/packages/toast/index.pcss +++ b/packages/toast/index.pcss @@ -21,6 +21,7 @@ } .zan-toast__icon { + display: block; width: 40px; height: 40px; line-height: 40px; @@ -35,6 +36,16 @@ line-height: 0; } +.zan-loading { + width:20px; + height:20px; + display: inline-block; + vertical-align: middle; + animation: weuiLoading 1s steps(12, end) infinite; + background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat; + background-size: 100%; +} + .zan-toast__icon-loading .zan-loading { width: 40px; height: 40px; diff --git a/packages/toast/index.wxml b/packages/toast/index.wxml index 0798d9f8..ac180b71 100644 --- a/packages/toast/index.wxml +++ b/packages/toast/index.wxml @@ -1,31 +1,30 @@ - + + {{ message }} + diff --git a/packages/toast/toast.js b/packages/toast/toast.js new file mode 100644 index 00000000..b2f57b4e --- /dev/null +++ b/packages/toast/toast.js @@ -0,0 +1,60 @@ +let timeoutData = { + timeoutId: 0, + toastCtx: null +} + +function Toast(options = {}, pageCtx) { + let ctx = pageCtx; + if (!ctx) { + const pages = getCurrentPages(); + ctx = pages[pages.length - 1]; + } + const toastCtx = ctx.selectComponent(options.selector); + + if (!toastCtx) { + console.error('无法找到对应的toast组件，请于页面中注册并在 wxml 中声明 toast 自定义组件'); + return; + } + + if (timeoutData.timeoutId) { + Toast.clear(); + } + + toastCtx.show({ + ...options, + show: true + }); + + const timeoutId = setTimeout(() => { + toastCtx.clear(); + }, options.timeout || 3000); + + timeoutData = { + timeoutId, + toastCtx + } +}; + +// 清理所有 toast +Toast.clear = function() { + clearTimeout(timeoutData.timeoutId); + + try { + timeoutData.toastCtx && timeoutData.toastCtx.clear(); + } catch (e) {} + + timeoutData = { + timeoutId: 0, + toastCtx: null + } +} + +// 显示 loading +Toast.loading = function(options = {}) { + Toast({ + ...options, + type: 'loading' + }); +} + +module.exports = Toast;