更新时间:2020-12-30 11:29
Toast 提示文档介绍了使用该组件的不同方式以及 API 文档:
此外,如需查看该组件的视觉效果及示例代码,参考本文的 Demo。
<dependency component="{ Toast }" src="@alipay/antui-vue" ></dependency>
import { Toast } from '@alipay/antui-vue';
直接使用 Toast.show('显示内容');
的方式调用命令,不需要写在模板中。会自动在 document.body
上插入对应 DOM
。
Toast.show({
type: 'text',
text: '显示的消息'
});
Toast
提供以下静态方法:
name | 说明 | 函数 |
---|---|---|
show | 创建一个 Toast 实例并显示,创建的参数如下(也可以直接传字符串当做 text ) |
Function(option: Object| string): vm |
closeAll | 关闭当前所有未关闭的 Toast 实例 |
Function(void): void |
创建实例时,接受参数如下:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | Toast类型,可选值为text ,loading , warn , success , network , fail |
string | text |
text | 纯字符串文本 | string | - |
duration | 超时自动隐藏并销毁实例 | number | 3000 |
zIndex | 设置弹层的 zIndex 值 |
number | 9999 |
Toast.show
方法返回了一个vm
实例,其对外暴露以下方法:
name | 说明 | 函数 |
---|---|---|
hide | 在 duration 未到时主动隐藏并销毁实例 |
Function(void): void |
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | Toast类型,可选值为text ,loading , warn , success , network , fail |
string | text |
value | Toast的显示隐藏状态,支持v-model ,用于定时隐藏的触发 |
boolean | false |
duration | 超时自动触发$emit('input',false) ,如果设置为0则不触发 |
number | 3000 |
text | 纯字符串文本,如需DOM 请使用slot |
string | - |
onClose | 当隐藏时会触发 | Function | - |
multiline | true时修改默认样式支持多行显示文本 | Boolean | false |
name | 说明 | scope |
---|---|---|
- | 默认占位,内容,如果需要支持自定义 DOM |
—- |
name | 说明 | 函数 |
---|---|---|
input | 适配 v-model |
Function(newValue: boolean): void |
name | 说明 | 函数 |
---|---|---|
hide | 主动隐藏当前Toast | Function(void): void |
<template>
<div style="padding: 10px;">
<AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
<Toast v-model="show">自定义业务文案最多14个字符</Toast>
</div>
</template>
<script>
import { Toast, AButton } from "@alipay/antui-vue";
export default {
data() {
return { show: true };
},
methods: {
trigger() {
this.show = !this.show;
},
},
components: {
Toast,
AButton,
},
};
</script>
<template>
<div style="padding: 10px;">
<AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
<Toast type="loading" v-model="show">加载中...</Toast>
</div>
</template>
<script>
import { Toast, AButton } from "@alipay/antui-vue";
export default {
data() {
return { show: true };
},
methods: {
trigger() {
this.show = !this.show;
},
},
components: {
Toast,
AButton,
},
};
</script>
<template>
<div style="padding: 10px;">
<AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
<Toast type="warn" v-model="show">警示</Toast>
</div>
</template>
<script>
import { Toast, AButton } from "@alipay/antui-vue";
export default {
data() {
return { show: true };
},
methods: {
trigger() {
this.show = !this.show;
},
},
components: {
Toast,
AButton,
},
};
</script>
<template>
<div style="padding: 10px;">
<AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
<Toast type="success" v-model="show">成功</Toast>
</div>
</template>
<script>
import { Toast, AButton } from "@alipay/antui-vue";
export default {
data() {
return { show: true };
},
methods: {
trigger() {
this.show = !this.show;
},
},
components: {
Toast,
AButton,
},
};
</script>
在文档使用中是否遇到以下问题
更多建议
匿名提交