All Products
Search
Document Center

Mobile Platform as a Service:Toast

Last Updated:Mar 04, 2022

This topic describes different methods of using the Toast component and the API descriptions:

To view the visual effects and code sample of the component, see Demo.

Kylin

<dependency component="{ Toast }" src="@alipay/antui-vue" ></dependency>

ESModule

import { Toast } from '@alipay/antui-vue';

Service imperative call

You can directly use Toast.show ('Display content '); to call a command, instead of writing the command in a template. The DOM will be automatically inserted into document.body.

Toast.show({
  type: 'text',
  text: 'Displayed message'
});

Service documentation

static methods

Toast provides the following static methods.

Name

Description

Function

show

Creates and displays a Toast instance with the following parameters. You can also directly input a character string as the text.

Function(option: Object | string): vm

closeAll

Closes all currently non-closedToast instances.

Function(void): void

show options

The following parameters are accepted for creating an instance.

Property

Description

Type

Default value

type

Toast type. Value options include text, loading, warn, success, network, and fail.

String

‘text’

text

Pure character string text.

String

-

duration

Automatically hides and destructs an instance upon timeout.

Number

3000

zIndex

Specifies the zIndex value of the elastic layer.

Number

9999

instance methods

The Toast.show method returns a vm instance and exposes the following method.

Name

Description

Function

hide

Proactively hides and destructs the instance within the duration.

Function(void): void

API description

props

Property

Description

Type

Default value

type

Toast type. Value options include text, loading, warn, success, network, and fail.

String

‘text’

value

Displayed or hidden state of the Toast. v-model is supported for triggering scheduled hiding.

Boolean

false

duration

Upon timeout, $emit('input',false) is automatically triggered. If the value 0, $emit('input',false) will not be triggered.

Number

3000

text

Pure character string text. Use slot if DOM is required`.

String

-

onClose

Triggered when the Toast is hidden.

Function

-

multiline

When the value is true, the default pattern supports multi-line text.

Boolean

false

slots

Name

Description

Scope

-

Default placeholder and content, with custom DOM supported`.

-

events

Name

Description

Function

input

Adaptive to v-model.

Function(newValue: boolean): void

methods

Name

Description

Function

hide

Actively hides the current Toast.

Function(void): void

Demo

Text

Sample image

14 characters

Sample code

<template>

  <div style="padding: 10px;">
    <AButton @click="trigger">{{show?'Close':'Show'}}Toast</AButton>
    <Toast v-model="show">A maximum of 14 characters is allowed.</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>

Loading

Sample image

Loading

Sample code

<template>

  <div style="padding: 10px;">
    <AButton @click="trigger">{{show?'Close':'Show'}}Toast</AButton>
    <Toast type="loading" v-model="show">Loading...</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>

Warning

Sample image

Warning

Sample code

<template>

  <div style="padding: 10px;">
    <AButton @click="trigger">{{show?'Close':'Show'}}Toast</AButton>
    <Toast type="warn" v-model="show">Warning</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>

Success

Sample image

Successful

Sample code

<template>

  <div style="padding: 10px;">
    <AButton @click="trigger">{{show?'Close':'Show'}}Toast</AButton>
    <Toast type="success" v-model="show">Successful</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>