<template>
	<div class="message">
		<div class="item">
			<div class="title">普通提示</div>
			<h-button @click="info">info</h-button>
		</div>

		<div class="item">
			<div class="title">自定义时长</div>
			<h-button @click="success">Success</h-button>
		</div>

		<div class="item">
			<div class="title">全局 Loading</div>
			<h-button @click="loading">Loading</h-button>
		</div>

		<div class="item">
			<div class="title">其他提示类型</div>
			<h-button @click="error">Error</h-button>
			<h-button @click="warning">Warning</h-button>
		</div>

		<div class="api">
			<div class="title">Api</div>
			<ul>
				<li>message.loading(content, duration)</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'message',
		methods: {
			loading() {
				this.$message.loading('Loading...');
			},
			success() {
				this.$message.success('提示信息显示10s, 10s后将自动移除', 10);
			},
			info() {
				this.$message.info('Action in progress..');
			},
			error() {
				this.$message.error('Action in progress..');
			},
			warning() {
				this.$message.warning('Action in progress..');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		.item {
			margin-bottom: 10px;
			background: #fff;
			padding: 20px;

			.title {
				margin-bottom: 10px;
			}

			button {
				margin-right: 10px;
			}
		}

		.api {
			background: #fff;
			padding: 20px;

			.title {
				margin-bottom: 10px;
			}
		}
	}
</style>
