# vue-simple-toast

> vue仿微信弹窗小组件

Latest version **0.0.7** (published 2017-02-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-simple-toast
pnpm add vue-simple-toast
yarn add vue-simple-toast
bun add vue-simple-toast
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2017-02-14 |
| First published | 2016-11-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | 余阿伟 |
| Maintainers | aweiu |
| Keywords | toast, modal, vue-modal, vue-toast, vue |

## Links

- npm: https://www.npmjs.com/package/vue-simple-toast
- Repository: https://github.com/aweiu/vue-simple-toast
- Homepage: https://github.com/aweiu/vue-simple-toast#readme
- Issues: https://github.com/aweiu/vue-simple-toast/issues
- npm.io page: https://npm.io/package/vue-simple-toast

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2017-02-14
- 0.0.6 — 2016-11-18
- 0.0.5 — 2016-11-16
- 0.0.4 — 2016-11-02
- 0.0.3 — 2016-11-02
- 0.0.2 — 2016-11-01
- 0.0.1 — 2016-11-01
- 0.0.0 — 2016-11-01

## README

# vue-simple-toast
vue仿微信弹窗小组件

## 安装
```
npm install vue-simple-toast
```
## 使用
**VUE版本：1.x** <br>
**必须在vue-cli生成的webpack模板环境中使用**
```
import Toast from 'vue-simple-toast'
// 实例化
var toast = new Toast()
// 显示一个加载画面
toast.show('loading', '正在加载数据')
// 关闭加载画面
toast.hide()
```
![image](https://github.com/aweiu/vue-simple-toast/raw/master/example.png)
## 支持的toast图标类型
* loading 正在加载
* warning 警告
* success 成功

## 实例化
```
new Toast(zIndex)
```
zIndex: 对应Toast实例节点的style.zIndex。默认：100

## 方法
### show(type, content, closeDelay)
显示一条toast
* type：toast图标类型
* content：toast文字内容
* closeDelay：自动关闭toast的时间（0：不自动关闭） 单位：毫秒；默认：1500

## 常见问题
### 为什么不用vue组件的数据响应方式来显示toast，而是用传统的方法调用?
toast这种组件，显示时机和地方一般都是不确定的，也就是说它不应该直接，始终存在于你的实际业务页面中，它应该是独立的。任何地方都可以调用，需要它的时候再在dom中插入它

### 如果我实例化了多个Toast，dom中会不会插入多个Toast标签?
不会，甚至不同的npm模块生成的实例都会共用。组件会自己维护一个队列来实现多个Toast实例之间的显示和关闭互不影响，同时只会显示最后一个还没有被关闭的Toast

---
_Source: https://npm.io/package/vue-simple-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._