Toast 提示_弹窗组件_基于 H5 框架 - UI 组件库_前端框架与 UI 组件

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

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

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

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提供以下静态方法

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

文本

截图

代码

<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>