本文介绍了使用 Toast 提示组件的不同方式以及相关 API。
在 Kylin 工程中使用该组件。
在其他工程中使用,通过 ESModule 的方式导入组件。
使用 Service 命令式调用。Service 说明 提供了 static methods、show options 的说明。
API 说明 提供了 props、slots、events、methods 的接口信息。
此外,如需查看该组件的视觉效果及示例代码,参考本文的 Demo。
Kylin
<dependency component="{ Toast }" src="@alipay/antui-vue" ></dependency>
ESModule
import { Toast } from '@alipay/antui-vue';
Service 命令式调用
直接使用 Toast.show('显示内容');
的方式调用命令,不需要写在模板中。会自动在 document.body
上插入对应 DOM
。
Toast.show({
type: 'text',
text: '显示的消息'
});
Service 说明
static methods
Toast
提供以下静态方法:
属性 | 说明 | 函数 |
show | 创建一个 | Function(option: Object| string): vm |
closeAll | 关闭当前所有未关闭的 | Function(void): void |
show options
创建实例时,支持的参数如下:
属性 | 说明 | 类型 | 默认值 |
type | Toast类型,可选值为 | string | text |
text | 纯字符串文本。 | string | - |
duration | 超时自动隐藏并销毁实例。 | number | 3000 |
zIndex | 设置弹层的 | number | 9999 |
instance methods
Toast.show
方法返回了一个 vm
实例,其对外暴露以下方法:
属性 | 说明 | 函数 |
hide | 在 | Function(void): void |
API 说明
props
属性 | 说明 | 类型 | 默认值 |
type | Toast类型,可选值为 | string | text |
value | Toast 的显式隐藏状态,支持 | boolean | false |
duration | 超时自动触发 | number | 3000 |
text | 纯字符串文本,如需 DOM 请使用 | string | - |
onClose | 当隐藏时会触发。 | Function | - |
multiline | 为 true 时修改默认样式,支持多行显示文本。 | Boolean | false |
slots
属性 | 说明 | scope |
- | 默认占位,内容如果需要支持自定义 | - |
events
属性 | 说明 | 函数 |
input | 适配 | Function(newValue: boolean): void |
methods
属性 | 说明 | 函数 |
hide | 主动隐藏当前 Toast。 | Function(void): void |
Demo
文本
截图
代码
<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>