@58fe/p5/src/doc/toast.md

pc端vue组件

<script>
	module.exports = {
		methods: {
			showPlugin() {
				this.$p5.toast({content: '我是插件方式调用出来的~~~', animateEnter: 'tada'});
			}
		},
		data() {
			return{
				show: false,
				showSlotWay: false,
				showPositionNumber: false,
				content: '自定义的提示内容',
				contentPositionNumber: '自定义距离顶部的距离'
			}
		}
	}
</script>
## Toast

### 引入

```javascript
import { toast } from '@58fe/p5';
```

### 基本用法

文案部分可以加入`<br/>`等换行符，
并且支持slot方式传入
:::demo 
```html
<btn @click="show=true">打开toast</btn>
<toast :content="content" v-model="show" animate-enter="fadeIn"></toast>

<btn @click="showSlotWay=true">slot方式写入内容</btn>
<toast  v-model="showSlotWay"><slot>我是slot插入进来的</slot></toast>
<script>
	module.exports = {
		data() {
			return{
				show: false,
				showSlotWay: false,
				content: '自定义的提示内容'
			}
		}
	}
</script>
```

:::


### 自定义位置
`position`数字类型，距离顶部的距离，单位为px

:::demo 
```html
<btn @click="showPositionNumber=true">自定义距离顶部的距离</btn>
<toast :content="contentPositionNumber" v-model="showPositionNumber" position="100"></toast>
<script>
	module.exports = {
		data() {
			return{
				showPositionNumber: false,
				contentPositionNumber: '自定义距离顶部的距离'
			}
		}
	}
</script>
```

:::


### 插件使用
插件的直接调用

```javascript
import { toastPlugin } from '@58fe/p5';
Vue.use(toastPlugin);
```

:::demo 

```html
<btn @click="showPlugin">插件方式打开toast</btn>
<script>
	module.exports = {
		methods: {
			showPlugin() {
				this.$p5.toast({content: '我是插件方式调用出来的~~~', animateEnter: 'tada'});
			}
		}
	}
</script>
```

:::



### 参数

| 参数         | 说明           | 类型                | 可选值       | 默认值  |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| position     | 位置            | String |  top/center/数字值    |center |
| animateEnter     | 进入动画            | String |  shake/fadeIn/tada/wobble/heartBeat     | shake
| animateLeave     | 消失动画            | String |  fadeOut/bounceOut/zoomOut    | fadeOut|