如何使用Toast提示组件,有哪些方式_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

本文介绍了使用 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	创建一个 `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 实例，其对外暴露以下方法：

属性	说明	函数
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

属性	说明	scope
-	默认占位，内容如果需要支持自定义 `DOM`。	-

events

属性	说明	函数
input	适配 `v-model`。	Function(newValue: boolean): void

methods

属性	说明	函数
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>