Toast 提示

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 options

创建实例时，接受参数如下：

instance methods

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

API 文档

props

slots

events

methods

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>