https://github.com/aweiu/vue-simple-toast
vue仿微信弹窗小组件
https://github.com/aweiu/vue-simple-toast
Last synced: 3 months ago
JSON representation
vue仿微信弹窗小组件
- Host: GitHub
- URL: https://github.com/aweiu/vue-simple-toast
- Owner: aweiu
- Created: 2016-10-28T03:40:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-14T09:50:29.000Z (over 8 years ago)
- Last Synced: 2025-02-06T15:05:58.646Z (4 months ago)
- Language: Vue
- Size: 19.5 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-simple-toast
vue仿微信弹窗小组件
## 安装
```
npm install vue-simple-toast
```
## 使用
**VUE版本：1.x**
**必须在vue-cli生成的webpack模板环境中使用**
```
import Toast from 'vue-simple-toast'
// 实例化
var toast = new Toast()
// 显示一个加载画面
toast.show('loading', '正在加载数据')
// 关闭加载画面
toast.hide()
```
## 支持的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