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

pc端vue组件

<script>
	module.exports = {
		methods: {
			ok() {
				alert('ok~!');
			},
			showMessageInfoPlugin() {
				this.$p5.message.info('这是一条普通提示', 2000);
			},
			showMessageSuccessPlugin() {
					this.$p5.message.success('这是一条成功提示', 2000);
			},
			showMessageErrorPlugin() {
					this.$p5.message.error('这是一条错误提示', 2000);
			},
			showMessageWarningPlugin() {
					this.$p5.message.warning('这是一条警告', 2000);
			},
			showLongTime() {
				this.$p5.message.info('我可以显示10s', 10000);
			}
		},
		data() {
			return {
				show: false,
				showTopDistance: false
			};
		}
	}
</script>

## Message 通知
轻量级的信息反馈组件，在顶部居中显示，并自动消失。有多种不同的提示状态可选择。

### 引入

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

### 基本用法

在页面的中上方打开一条提示

:::demo 按钮

```html
<message v-model="show" msgtype="info" content="这是一条普通提示" duration="2000"></message>
<btn @click="show=true">打开一条普通提示</btn>

<script>
export default {
	data() {
		return {
			show: false
		};
	}
};
</script>
```

:::

### 距离顶部的距离

可以自定义到顶部的距离

:::demo 按钮

```html
<message v-model="showTopDistance" msgtype="info" content="我距离顶部40px" duration="2000" top="40"></message>
<btn @click="showTopDistance=true">距离顶部40px</btn>

<script>
export default {
	data() {
		return {
			show: false
		};
	}
};
</script>
```

:::

### 插件调用

在JS代码中，通过插件形式来调用


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

:::demo 插件

```html
<btn @click="showMessageInfoPlugin()">普通提示</btn>
<btn @click="showMessageSuccessPlugin()">成功提示</btn>
<btn @click="showMessageErrorPlugin()">错误提示</btn>
<btn @click="showMessageWarningPlugin()">警告</btn>

<script>
module.exports = {
	methods: {
		showMessageInfoPlugin() {
			this.$p5.message.info('这是一条普通提示', 2000);
		},
		showMessageSuccessPlugin() {
			this.$p5.message.success('这是一条成功提示', 2000);
		},
		showMessageErrorPlugin() {
			this.$p5.message.error('这是一条错误提示', 2000);
		},
		showMessageWarningPlugin() {
			this.$p5.message.warning('这是一条警告', 2000);
		},
	}
}
</script>
```

:::




### 自定义时长

增加参数可以自定义时长

:::demo 自定义时长

```html
<btn @click="showLongTime()">显示一个10秒的提示</btn>

<script>
module.exports = {
	methods: {
		showLongTime() {
			this.$p5.message.info('我可以显示10s', 10000);
		}
	}
}
</script>
```

:::

### 参数

| 参数     | 说明         | 类型        | 可选值       | 默认值  |
| -------- | ------------ | ----------- | ------------ | ------- |
| msgtype | 提示类型 | String     | ['info', 'error', 'success', 'warning']     | info   |
| content     | 内容文案     | String | —— | 这是一条提示 |
| duration     | 自动关闭的延时     | String/Number | —— | 1500 |