Vue2封装自制组件（二）：按钮组件

Vue组件的API分为几部分：model，props，slot，event，$emit

在这里button只需要用到props单向传送即可。

一：button.vue组件代码

<template>
	<button class="vi-button" @click="handleClick"
		:class="[type ? 'vi-button--' + type : '',size ? 'vi-button--' + size:'']">
		<slot></slot>
	</button>
</template>
<script>
	export default {
		name: 'ViButton',
		componentName: 'ViButton',
		props: {
			type: {
				type: String,
				default: 'default'//组件默认样式
			},
			size: String,//组件大小
		},
		methods: {
			handleClick(evt) {//点击反馈
				this.$emit('click', evt);
			}
		}
	};
</script>

这里定义了type和size两个参数，可以控制按钮样式和大小。

同样，也可以灵活修改，比如按钮标题的位置，可以新加一个label参数来修改。

二：index.css中加入按钮样式

.vi-button {
	display: inline-block;
	padding: 8px 20px;
	outline: 0;
	text-align: center;
	white-space: nowrap;
	border: 1px solid #c5d9e8;
	border-radius: 10px;
	background-color: #fff;
	-webkit-transition: background .2s;
	transition: background .2s;
	-webkit-user-sviect: none;
	-moz-user-sviect: none;
	-ms-user-sviect: none;
	user-sviect: none;
	cursor: pointer;
	font-size: 12px;
	overflow: hidden;
	color: #324A5D;
}

.vi-button:hover {
	background-color: #f3f7fa
}

.vi-button--primary {
	color: #FFF;
	border: none;
	background-color: #324A5D;
	border-color: #324A5D;
}

.vi-button--primary:hover {
	background: #5B6E7D;
	border-color: #5B6E7D;
}

.vi-button--mini {
	padding: 4px 20px;
}

.vi-button--small {
	padding: 6px 20px;
}

.vi-button--medium {
	padding: 10px 20px;
}

css样式中可以随意更改按钮颜色和按钮大小，灵活改动。

同时，也可以加入按钮禁用样式。

三：按钮禁用

button.vue

<template>
	<button class="vi-button" @click="handleClick"
		:class="[type ? 'vi-button--' + type : '',size ? 'vi-button--' + size:'',{'is-disabled': disabled}]"
		:disabled="disabled">
		<slot></slot>
	</button>
</template>
<script>
	export default {
		name: 'ViButton',
		componentName: 'ViButton',
		props: {
			type: {
				type: String,
				default: 'default'
			},
			size: String,
			disabled: {
				type: Boolean,
				default: false,
			},
		},
		methods: {
			handleClick(evt) {
				this.$emit('click', evt);
			}
		}
	};
</script>

index.css

//禁用按钮
.vi-button.is-disabled {
	background-color: #FAFAFA;
	cursor: not-allowed;
}

四：按钮组件使用示例

<vi-button>默认按钮</vi-button>
<vi-button type="primary">主要按钮</vi-button>
<vi-button size="medium">大型按钮</vi-button>
<vi-button size="small">小型按钮</vi-button>
<vi-button size="mini">迷你按钮</vi-button>
<vi-button disabled>禁用按钮</vi-button>

效果：