移动开发平台 mPaaS 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 提供以下静态方法：

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>