All Products
Search
Document Center

Toast

Last Updated: Jul 16, 2021

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

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

ESModule

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

 
  1. Toast.show({
  2. type: 'text',
  3. text: 'Displayed message'
  4. });

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

Sample code

 
  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
  4. <Toast v-model="show">自定义业务文案最多14个字符</Toast>
  5. </div>
  6. </template>
  7. <script>
  8. import { Toast, AButton } from "@alipay/antui-vue";
  9. export default {
  10. data() {
  11. return { show: true };
  12. },
  13. methods: {
  14. trigger() {
  15. this.show = !this.show;
  16. },
  17. },
  18. components: {
  19. Toast,
  20. AButton,
  21. },
  22. };
  23. </script>

Loading

Sample image

Sample code

 
  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
  4. <Toast type="loading" v-model="show">加载中...</Toast>
  5. </div>
  6. </template>
  7. <script>
  8. import { Toast, AButton } from "@alipay/antui-vue";
  9. export default {
  10. data() {
  11. return { show: true };
  12. },
  13. methods: {
  14. trigger() {
  15. this.show = !this.show;
  16. },
  17. },
  18. components: {
  19. Toast,
  20. AButton,
  21. },
  22. };
  23. </script>

Warning

Sample image

Sample code

 
  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
  4. <Toast type="warn" v-model="show">警示</Toast>
  5. </div>
  6. </template>
  7. <script>
  8. import { Toast, AButton } from "@alipay/antui-vue";
  9. export default {
  10. data() {
  11. return { show: true };
  12. },
  13. methods: {
  14. trigger() {
  15. this.show = !this.show;
  16. },
  17. },
  18. components: {
  19. Toast,
  20. AButton,
  21. },
  22. };
  23. </script>

Success

Sample image

Sample code

 
  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton @click="trigger">{{show?'关闭':'显示'}}Toast</AButton>
  4. <Toast type="success" v-model="show">成功</Toast>
  5. </div>
  6. </template>
  7. <script>
  8. import { Toast, AButton } from "@alipay/antui-vue";
  9. export default {
  10. data() {
  11. return { show: true };
  12. },
  13. methods: {
  14. trigger() {
  15. this.show = !this.show;
  16. },
  17. },
  18. components: {
  19. Toast,
  20. AButton,
  21. },
  22. };
  23. </script>