feat: update toast&switch

This commit is contained in:
jiangruowei
2017-03-17 11:30:53 +08:00
parent 9ccce7cd5c
commit 25ce414de2
6 changed files with 101 additions and 27 deletions

View File

@@ -16,6 +16,25 @@
}
</style>
<script>
export default {
data() {
return {
switchState: true
};
},
computed: {
switchStateText() {
return this.switchState ? ' ON' : 'OFF';
}
},
methods: {
updateState(newState) {
this.switchState = newState;
}
}
};
</script>
## Switch组件
@@ -24,7 +43,7 @@
:::demo 基础用法
```html
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
<div class="demo-switch__text">{{switchStateText}}</div>
</div>
<div class="demo-switch__wrapper">
@@ -73,4 +92,3 @@ export default {
| checked | 开关状态 | boolean | false | true, false |
| loading | loading状态 | boolean | false | true, false |
| disabled | 禁用状态 | boolean | false | true, false |
| onChange | 回调 | function | function{} | - |

View File

@@ -16,11 +16,30 @@ export default {
showSimpleToast() {
Toast('我是提示文案,建议不超过十五字~');
},
showToast(type) {
Toast({
type: type,
message: '文案信息'
})
showLoadingToast() {
Toast.loading();
},
showSuccessToast() {
Toast.success('成功文案');
},
showFailToast() {
Toast.fail('失败文案');
},
showCustomizedToast(duration) {
let leftSec = duration / 1000;
let toast = Toast({
duration: duration + 1000,
type: 'success',
message: leftSec.toString()
});
window.setInterval(() => {
if (leftSec <= 1) {
window.clearInterval();
toast.message = '跳转中...'
return;
}
toast.message = (--leftSec).toString();
}, 1000);
}
}
};
@@ -32,11 +51,11 @@ export default {
:::demo 基础用法
```html
<zan-button @click="showSimpleToast()">普通文字提示</zan-button>
<zan-button @click="showToast('loading')">加载Toast</zan-button>
<zan-button @click="showToast('success')">成功</zan-button>
<zan-button @click="showToast('failure')">失败</zan-button>
<zan-button @click="showSimpleToast">普通文字提示</zan-button>
<zan-button @click="showLoadingToast">加载Toast</zan-button>
<zan-button @click="showSuccessToast">成功</zan-button>
<zan-button @click="showFailToast">失败</zan-button>
<zan-button @click="showCustomizedToast(5000)">倒数5秒</zan-button>
<script>
import { Toast } from 'src/index';
@@ -46,11 +65,30 @@ export default {
showSimpleToast() {
Toast('我是提示文案,建议不超过十五字~');
},
showToast(type) {
Toast({
type: type,
message: '文案信息'
})
showLoadingToast() {
Toast.loading();
},
showSuccessToast() {
Toast.success('成功文案');
},
showFailToast() {
Toast.fail('失败文案');
},
showCustomizedToast(duration) {
let leftSec = duration / 1000;
let toast = Toast({
duration: duration + 1000,
type: 'success',
message: leftSec.toString()
});
window.setInterval(() => {
if (leftSec <= 1) {
window.clearInterval();
toast.message = '跳转中...'
return;
}
toast.message = (--leftSec).toString();
}, 1000);
}
}
};
@@ -58,7 +96,6 @@ export default {
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |