ce4c83ff
 wxy
初始提交
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
# mpvue-toast
> mpvue-toast is a toast plugin for mpvue.
## Screenshots
## install
```bash
npm install mpvue-toast --save
```
## Usage
```html
<template>
<div>
<toast message="hello from toast" :visible.sync="visible"></toast>
<button @click='setVisible(false)'>toggle toast</button>
<!-- <toast message="hello from toast" :visible.sync="visible" :img="img"></toast> -->
<!-- <toast message="hello from toast" :visible.sync="visible" icon-class="iconfont icon-shoucang"></toast> -->
</div>
</template>
<script>
import toast from 'mpvue-toast'
// import img from 'img.jpg'
// import '@/icon.css'
export default {
data () {
return {
visible: false,
// img
}
},
components: {
toast
},
methods: {
setVisible() {
this.visible = !this.visible
}
},
}
</script>
```
## props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ----------------------- | ------- | ---- | ------ |
| animate | 是否启用动画 | Boolean | - | true |
| transition | 动画类型，现在支持 `slide` `fade` | String | `slide` `fade` | `slide` |
| duration | `Toast`的持续时间，单位毫秒 | Number | - | 2000 |
| message | `Toast`的内容 | String | - | - |
| className | `Toast`的class | String | - | - |
| img | 图片 | String | - | - |
| iconClass | 图标class，可以使用 `iconfont` | String | - | - |
| position | `Toast`的显示位置 | String | - | center |
| visible | 控制`Toast`的显示，支持`sync` | Boolean | - | - |
## TODO
- [ ] more animate support
- [ ] api
|
