全部产品
云市场
云游戏

Toast 提示

更新时间:2020-08-07 20:22:35

Toast 提示文档介绍了使用该组件的不同方式以及 API 文档:

  • Kylin 工程中使用该组件。
  • 在其他工程中使用,通过 ESModule 的方式导入组件。

API 文档 提供了 props、slots、events、methods 的接口信息。

Kylin

  1. <dependency component="{ Toast }" src="@alipay/antui-vue" ></dependency>

ESModule

  1. import { Toast } from '@alipay/antui-vue';

Service命令式调用

直接使用Toast.show('显示内容');的方式,调用命令,不需要写在模板中。会自动在document.body上插入对应DOM

  1. Toast.show({
  2. type: 'text',
  3. text: '显示的消息'
  4. });

Service 文档

static methods

Toast提供以下静态方法

name 说明 函数
show 创建一个Toast实例并显示,创建的参数如下(也可以直接传字符串当做text Function(option: Object string): vm
closeAll 关闭当前所有未关闭的Toast实例 Function(void): void

show options

创建实例时,接受参数如下,

属性 说明 类型 默认值
type Toast类型,可选值为text,loading, warn, success, network, fail string text
text 纯字符串文本 string -
duration 超时自动隐藏并销毁实例 number 3000
zIndex 设置弹层的zIndex number 9999

instance methods

Toast.show方法返回了一个vm实例,其对外暴露以下方法

name 说明 函数
hide duration未到时主动隐藏并销毁实例 Function(void): void

API 文档

props

属性 说明 类型 默认值
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

slots

name 说明 scope
- 默认占位,内容,如果需要支持自定义DOM —-

events

name 说明 函数
input 适配v-model Function(newValue: boolean): void

methods

name 说明 函数
hide 主动隐藏当前Toast Function(void): void

Demo

文本

截图

代码

  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
  4. <Toast v-model="show">自定义业务文案最多14个字符</Toast>
  5. </div>
  6. </template>
  7. <script>
  8. import { Toast, AButton } from "@alipay/antui-vue";
  9. export default {
  10. data() {
  11. return { show: true };
  12. },
  13. methods: {
  14. trigger() {
  15. this.show = !this.show;
  16. },
  17. },
  18. components: {
  19. Toast,
  20. AButton,
  21. },
  22. };
  23. </script>

加载中

截图

代码

  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
  4. <Toast type="loading" v-model="show">加载中...</Toast>
  5. </div>
  6. </template>
  7. <script>
  8. import { Toast, AButton } from "@alipay/antui-vue";
  9. export default {
  10. data() {
  11. return { show: true };
  12. },
  13. methods: {
  14. trigger() {
  15. this.show = !this.show;
  16. },
  17. },
  18. components: {
  19. Toast,
  20. AButton,
  21. },
  22. };
  23. </script>

警告

截图

代码

  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
  4. <Toast type="warn" v-model="show">警示</Toast>
  5. </div>
  6. </template>
  7. <script>
  8. import { Toast, AButton } from "@alipay/antui-vue";
  9. export default {
  10. data() {
  11. return { show: true };
  12. },
  13. methods: {
  14. trigger() {
  15. this.show = !this.show;
  16. },
  17. },
  18. components: {
  19. Toast,
  20. AButton,
  21. },
  22. };
  23. </script>

成功

截图

代码

  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
  4. <Toast type="success" v-model="show">成功</Toast>
  5. </div>
  6. </template>
  7. <script>
  8. import { Toast, AButton } from "@alipay/antui-vue";
  9. export default {
  10. data() {
  11. return { show: true };
  12. },
  13. methods: {
  14. trigger() {
  15. this.show = !this.show;
  16. },
  17. },
  18. components: {
  19. Toast,
  20. AButton,
  21. },
  22. };
  23. </script>