Overview

A toast component written with Vue, designed based on Ant Design.


vue-toast 1.x deprecated

Show Cases

On pc:

On mobile:

Installation

First, install vue-toast from npm:

npm install v-toast --save-dev

Or in package.json:

"dependencies": {
  "v-toast": "2.1.7"
}

Then use it:

//CommonJS
var Toast = require('v-toast');

Usage

Basically you can pass a string to Toast:

Toast.info('this is a example');

Or invoke Toast with an object as its configuration:

Toast.info({
  message: 'this is a example',
  duration: 5000
});

API

|Opthion|Description| |:--:|:--:| |Toast.info(message:String|config:Object)|show a info toast| |Toast.success(message:String|config:Object)|show a success toast| |Toast.warn(message:String|config:Object)|show a warn toast| |Toast.error(message:String|config:Object)|show a error toast| |Toast.loading(message:String|config:Object)|show a loading toast|

Configuration

|Opthion|Description|Default| |:--:|:--:|:--:|:--:| |message|a string as the content of the toast|''| |duration|time before the toast vanishes, in millisecond|1500|

If duration is 0, toast won't disappear but you invoke remove:

<button @click="loading"><span>显示加载中...</span></button>

loading() {
  const instance = Toast.loading({
    message:"Action....",
    duration:0
  });
  setTimeout(instance.remove, 2500);
}

This is useful showing loading state for user in async action.

License

MIT