文档

Toast 提示

更新时间:

本文介绍了使用 Toast 提示组件的不同方式以及相关 API。

此外,如需查看该组件的视觉效果及示例代码,参考本文的 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

创建一个 Toast 实例并显示,创建的参数如下(也可以直接传字符串当做 text)。

Function(option: Object| string): vm

closeAll

关闭当前所有未关闭的 Toast 实例。

Function(void): void

show options

创建实例时,支持的参数如下:

属性

说明

类型

默认值

type

Toast类型,可选值为textloadingwarnsuccessnetworkfail

string

text

text

纯字符串文本。

string

-

duration

超时自动隐藏并销毁实例。

number

3000

zIndex

设置弹层的 zIndex 值。

number

9999

instance methods

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

属性

说明

函数

hide

duration 未到时主动隐藏并销毁实例。

Function(void): void

API 说明

props

属性

说明

类型

默认值

type

Toast类型,可选值为textloadingwarnsuccessnetworkfail

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

属性

说明

scope

-

默认占位,内容如果需要支持自定义 DOM

-

events

属性

说明

函数

input

适配 v-model

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>
  • 本页导读 (0)
文档反馈