2017-03-21 20:50:34 +08:00

105 lines
2.3 KiB
Markdown

<style>
@component-namespace demo {
@b toast {
.zan-button {
margin: 15px;
}
}
}
</style>
<script>
import { Toast } from 'src/index';
export default {
methods: {
showSimpleToast() {
Toast('我是提示文案,建议不超过十五字~');
},
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);
}
}
};
</script>
## Toast
### 基础用法
:::demo 基础用法
```html
<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';
export default {
methods: {
showSimpleToast() {
Toast('我是提示文案,建议不超过十五字~');
},
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);
}
}
};
</script>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| type | 类型 | `string` | `text` | `text`, `loading`, `success`, `failure` |
| message | 内容 | `string` | | - |