Merge branch 'master' into feature/code_review

This commit is contained in:
cookfront 2017-03-30 21:22:40 +08:00
commit defec4a4a3
7 changed files with 45 additions and 50 deletions

View File

@ -69,18 +69,6 @@ export default {
``` ```
::: :::
#### 带*号,标明必填
传入`required`属性
:::demo 带*号,标明必填
```html
<zan-cell-group>
<zan-cell title="单元格1" required></zan-cell>
</zan-cell-group>
```
:::
#### 标题带描述信息 #### 标题带描述信息
传入`label`属性,属性值为描述信息的值。 传入`label`属性,属性值为描述信息的值。

View File

@ -38,9 +38,9 @@ export default {
type: 'success', type: 'success',
message: leftSec.toString() message: leftSec.toString()
}); });
window.setInterval(() => { const id = window.setInterval(() => {
if (leftSec <= 1) { if (leftSec <= 1) {
window.clearInterval(); window.clearInterval(id);
toast.message = '跳转中...' toast.message = '跳转中...'
return; return;
} }
@ -106,9 +106,9 @@ export default {
type: 'success', type: 'success',
message: leftSec.toString() message: leftSec.toString()
}); });
window.setInterval(() => { const id = window.setInterval(() => {
if (leftSec <= 1) { if (leftSec <= 1) {
window.clearInterval(); window.clearInterval(id);
toast.message = '跳转中...' toast.message = '跳转中...'
return; return;
} }
@ -134,10 +134,10 @@ import { Toast } from 'src/index';
export default { export default {
methods: { methods: {
showToast() { showToast() {
this.toast = Toast('我是提示文案,建议不超过十五字~'); Toast('我是提示文案,建议不超过十五字~');
}, },
closeToast() { closeToast() {
this.toast.clear(); Toast.clear();
} }
} }
}; };
@ -212,5 +212,5 @@ export default {
| forbidClick | 不允许背景点击 | Boolean | false | true, false| | forbidClick | 不允许背景点击 | Boolean | false | true, false|
| duration | 时长(ms) | Number | 3000ms | -| | duration | 时长(ms) | Number | 3000ms | -|
### instanceOfToast.clear() ### Toast.clear()
关闭toast。 关闭toast。

View File

@ -1,7 +1,7 @@
<template> <template>
<a class="zan-cell" :href="url" @click="handleClick"> <a :class="['zan-cell', { 'zan-cell--required': required }]" :href="url" @click="handleClick">
<div <div
:class="{ 'zan-cell__title': true, 'zan-cell__required': required }" class="zan-cell__title"
v-if="this.$slots.title || title" v-if="this.$slots.title || title"
> >
<i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i> <i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
@ -14,8 +14,8 @@
class="zan-cell__value" class="zan-cell__value"
v-if="value || this.$slots.default" v-if="value || this.$slots.default"
:class="{ :class="{
'is-link': isLink, 'zan-cell__value--link': isLink,
'is-alone': !this.$slots.title && !title && !label 'zan-cell__value--alone': !this.$slots.title && !title && !label
}" }"
> >
<slot> <slot>

View File

@ -2,24 +2,17 @@ import Vue from 'vue';
import merge from 'src/utils/merge'; import merge from 'src/utils/merge';
const ToastConstructor = Vue.extend(require('./toast.vue')); const ToastConstructor = Vue.extend(require('./toast.vue'));
let toastQueue = []; let instance;
const getInstance = () => { const getInstance = () => {
if (toastQueue.length > 0) { if (instance) instance.clear();
const instance = toastQueue[0];
toastQueue.splice(0, 1); instance = new ToastConstructor({
return instance;
}
return new ToastConstructor({
el: document.createElement('div') el: document.createElement('div')
}); });
return instance;
}; };
const returnInstance = instance => {
if (instance) {
toastQueue.push(instance);
}
};
const removeDom = event => { const removeDom = event => {
if (event.target.parentNode) { if (event.target.parentNode) {
@ -31,7 +24,6 @@ var Toast = (options = {}) => {
const duration = options.duration || 3000; const duration = options.duration || 3000;
let instance = getInstance(); let instance = getInstance();
returnInstance(instance);
instance.closed = false; instance.closed = false;
clearTimeout(instance.timer); clearTimeout(instance.timer);
instance.type = options.type ? options.type : 'text'; instance.type = options.type ? options.type : 'text';
@ -77,4 +69,8 @@ Toast.fail = (options) => {
}, options)); }, options));
}; };
Toast.clear = () => {
if (instance) instance.clear();
}
export default Toast; export default Toast;

View File

@ -1,5 +1,5 @@
<template> <template>
<transition name="zan-toast"> <transition name="zan-toast-fade">
<div class="zan-toast-wrapper" v-show="visible"> <div class="zan-toast-wrapper" v-show="visible">
<div class="zan-toast" :class="['zan-toast--' + displayStyle]"> <div class="zan-toast" :class="['zan-toast--' + displayStyle]">
<!-- 只显示文字 --> <!-- 只显示文字 -->

View File

@ -36,16 +36,6 @@
@e title { @e title {
float: left; float: left;
&.zan-cell__required {
&::before {
content: '*';
position: absolute;
left: -7px;
font-size: 14px;
color: #f44;
}
}
} }
@e label { @e label {
@ -59,15 +49,32 @@
float: right; float: right;
overflow: hidden; overflow: hidden;
@when link { @m link {
margin-right: 20px; margin-right: 20px;
} }
@when alone { @m alone {
float: none; float: none;
} }
} }
@m required {
overflow: visible;
&::before {
content: '*';
position: absolute;
left: -7px;
font-size: 14px;
color: #f44;
}
.zan-cell__title {
float: none;
display: inline-block;
}
}
.zan-icon-arrow { .zan-icon-arrow {
position: absolute; position: absolute;
top: 50%; top: 50%;

View File

@ -44,9 +44,13 @@
} }
.zan-toast__text { .zan-toast__text {
padding-bottom: 20px; padding: 15px 0 20px;
font-size: 14px; font-size: 14px;
} }
} }
} }
} }
.zan-toast-fade-enter, .zan-toast-fade-leave-active {
opacity: 0;
}