vant/docs/examples-docs/en-US/toast.md

Toast

Install

import { Toast } from 'vant';

Usage

Text

:::demo Text

<van-button @click="showToast">Show Text</van-button>

export default {
  methods: {
    showToast() {
      Toast('Some messages');
    }
  }
}

:::

Loading

:::demo Loading

<van-button @click="showLoadingToast">Show Loading</van-button>

export default {
  methods: {
    showLoadingToast() {
      Toast.loading({ mask: true });
    }
  }
}

:::

Success/Fail

:::demo Success/Fail

<van-button @click="showSuccessToast">Show Success</van-button>
<van-button @click="showFailToast">Show Fail</van-button>

export default {
  methods: {
    showSuccessToast() {
      Toast.success('Success');
    },
    showFailToast() {
      Toast.fail('Fail');
    }
  }
}

:::

Advanced Usage

:::demo Advanced Usage

<van-button @click="showCustomizedToast">Advanced Usage</van-button>

export default {
  methods: {
    showCustomizedToast() {
      const toast = Toast.loading({
        duration: 0,       // continuous display toast
        forbidClick: true, // forbid click background
        message: '3 seconds'
      });

      let second = 3;
      const timer = setInterval(() => {
        second--;
        if (second) {
          toast.message = `${second} seconds`;
        } else {
          clearInterval(timer);
          Toast.clear();
        }
      }, 1000);
    }
  }
};

:::

Methods

Methods	Attribute	Return value	Description
Toast	`options	message`	toast instance
Toast.loading	`options	message`	toast instance
Toast.success	`options	message`	toast instance
Toast.fail	`options	message`	toast instance
Toast.clear	-	void	Close

Options

Attribute	Description	Type	Default	Accepted Values
type	Type	String	text	loading success fail html
message	Message	String	''	-
position	Position	String	middle	top bottom
mask	Whether to show mask	Boolean	false	-
forbidClick	Whether to forbid click background	Boolean	false	-
duration	Toast duration(ms)	Number	3000	Toast won't disappear if value is 0