This topic describes different methods of using the Toast component and the API descriptions:
Use this component in the Kylin project.
Use this component in other projects. Import it through ESModule.
Use Service imperative call. Service documentation provides details about static methods and show options.
API description provides API information for props, slots, events, and methods.
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 | Function(option: Object | string): vm |
closeAll | Closes all currently non-closed | 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 | String | ‘text’ |
text | Pure character string text. | String | - |
duration | Automatically hides and destructs an instance upon timeout. | Number | 3000 |
zIndex | Specifies the | 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 | Function(void): void |
API description
props
Property | Description | Type | Default value |
---|---|---|---|
type | Toast type. Value options include | String | ‘text’ |
value | Displayed or hidden state of the Toast. | Boolean | false |
duration | Upon timeout, | Number | 3000 |
text | Pure character string text. Use | 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 | - |
events
Name | Description | Function |
---|---|---|
input | Adaptive to | Function(newValue: boolean): void |
methods
Name | Description | Function |
---|---|---|
hide | Actively hides the current Toast. | Function(void): void |
Demo
Text
Sample image
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
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
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
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>