diff --git a/docs/examples-docs/toast.md b/docs/examples-docs/toast.md index 4a6681170..28818cdbc 100644 --- a/docs/examples-docs/toast.md +++ b/docs/examples-docs/toast.md @@ -25,6 +25,12 @@ export default { showFailToast() { Toast.fail('失败文案'); }, + showForbidClickToast() { + Toast({ + message: '背景不能点击', + forbidClick: true + }) + }, showCustomizedToast(duration) { let leftSec = duration / 1000; let toast = Toast({ @@ -40,6 +46,12 @@ export default { } toast.message = (--leftSec).toString(); }, 1000); + }, + showToast() { + this.toast = Toast('我是提示文案，建议不超过十五字~'); + }, + closeToast() { + this.toast.clear(); } } }; @@ -55,6 +67,7 @@ export default { 加载Toast 成功 失败 +背景不能点击 倒数5秒 +``` +::: + + + +### 基础用法 +### Toast(options) | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | type | 类型 | String | 'text' | 'text', 'loading', 'success', 'failure' | +| message | 内容 | String | '' | - |\| message | 内容 | String | '' | - +| forbidClick | 不允许背景点击 | Boolean | false | true, false| + +### 快速用法 +### Toast(message) + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| | message | 内容 | String | '' | - | + +### Toast.loading() || Toast.loading(message, options) + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| forbidClick | 不允许背景点击 | Boolean | false | true, false| + +### Toast.success(message) || Toast.success(message, options) + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'failure' | +| forbidClick | 不允许背景点击 | Boolean | false | true, false| + +### Toast.fail(message) || Toast.fail(message, options) + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'failure' | +| forbidClick | 不允许背景点击 | Boolean | false | true, false| + +### instanceOfToast.clear() +关闭toast。 diff --git a/packages/toast/src/toast.js b/packages/toast/src/toast.js index e90f4d0e7..8e6674b9b 100644 --- a/packages/toast/src/toast.js +++ b/packages/toast/src/toast.js @@ -36,16 +36,20 @@ var Toast = (options = {}) => { clearTimeout(instance.timer); instance.type = options.type ? options.type : 'text'; instance.message = typeof options === 'string' ? options : options.message; + instance.forbidClick = options.forbidClick ? options.forbidClick : false; + instance.clear = () => { + if (instance.closed) return; + instance.visible = false; + instance.$el.addEventListener('transitionend', removeDom); + instance.closed = true; + }; document.body.appendChild(instance.$el); Vue.nextTick(function() { instance.visible = true; instance.$el.removeEventListener('transitionend', removeDom); instance.timer = setTimeout(function() { - if (instance.closed) return; - instance.visible = false; - instance.$el.addEventListener('transitionend', removeDom); - instance.closed = true; + instance.clear(); }, duration); }); return instance; diff --git a/packages/toast/src/toast.vue b/packages/toast/src/toast.vue index 018d618de..c259624eb 100644 --- a/packages/toast/src/toast.vue +++ b/packages/toast/src/toast.vue @@ -1,19 +1,22 @@ @@ -54,6 +57,10 @@ export default { return value.length <= 16; } } + }, + forbidClick: { + type: Boolean, + default: false } }, data() { @@ -71,10 +78,6 @@ export default { default: return 'default'; } - }, - iconName() { - // TODO: 更新icon - return 'check'; } } }; diff --git a/packages/zanui-css/src/toast.css b/packages/zanui-css/src/toast.css index 9f4b5fa57..468817138 100644 --- a/packages/zanui-css/src/toast.css +++ b/packages/zanui-css/src/toast.css @@ -3,7 +3,7 @@ @component-namespace zan { @b toast { position: fixed; - z-index: 3000; + z-index: 3001; border-radius: 5px; background-color: #272727; opacity: .7; @@ -13,6 +13,17 @@ font-size: 12px; color: $c-white; text-align: center; + line-height: 12px; + + @e overlay { + position: fixed; + left: 0; + top: 0; + background: transparent; + height: 100vh; + width: 100vh; + z-index: 3000; + } @m loading { padding: 45px; @@ -26,12 +37,15 @@ @m default { width: 120px; height: 120px; + .zan-toast__icon { - padding: 20px; - font-size: 36px; + padding-top: 20px; + font-size: 50px; } + .zan-toast__text { padding-bottom: 20px; + font-size: 14px; } } } diff --git a/test/unit/specs/toast.spec.js b/test/unit/specs/toast.spec.js new file mode 100644 index 000000000..dc06e9cf4 --- /dev/null +++ b/test/unit/specs/toast.spec.js @@ -0,0 +1,36 @@ +import Toast from 'packages/toast'; +import { mount } from 'avoriaz'; + +describe('Toast', () => { + it('create simple toast', () => { + Toast('a message'); + var toast = document.querySelector('.zan-toast'); + + expect(toast).not.to.be.underfined; + + setTimeout(() => { + expect(toast.hidden).to.be.true; + }, 301); + }); + + it('create loading toast', () => { + Toast.loading(''); + var toast = document.querySelector('.zan-toast'); + + expect(toast).not.to.be.underfined; + + setTimeout(() => { + expect(toast.hidden).to.be.true; + }, 301); + }); + it('create loading toast', () => { + Toast.success(''); + var toast = document.querySelector('.zan-toast'); + + expect(toast).not.to.be.underfined; + + setTimeout(() => { + expect(toast.hidden).to.be.true; + }, 301); + }); +});