https://github.com/dwqs/vue-toast

A toast component written with Vue, designed based on Ant Design [deprecated]
https://github.com/dwqs/vue-toast

vue-toast vuejs2

Last synced: 10 days ago
JSON representation

A toast component written with Vue, designed based on Ant Design [deprecated]

• Host: GitHub
• URL: https://github.com/dwqs/vue-toast
• Owner: dwqs
• License: mit
• Created: 2016-11-23T06:04:45.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-07-12T08:18:34.000Z (over 7 years ago)
• Last Synced: 2024-04-25T06:44:02.295Z (7 months ago)
• Topics: vue-toast, vuejs2
• Language: Vue
• Homepage:
• Size: 67.4 KB
• Stars: 18
• Watchers: 5
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![download](https://img.shields.io/npm/dt/@dwqs/vue-toast.svg) ![npm-version](https://img.shields.io/npm/v/@dwqs/vue-toast.svg) ![license](https://img.shields.io/npm/l/@dwqs/vue-toast.svg)

## Overview

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


> vue-toast 1.x deprecated

## Show Cases

#### On pc:

![toast-pc](http://i1.piimg.com/567571/754217f003cb1e89.gif)

#### On mobile:

![toast-mobile](http://i1.piimg.com/567571/5d3124e9da091d8f.gif)

## Installation

First, install `vue-toast` from npm:

```

npm install v-toast --save

```

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`:

```

显示加载中...

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