Vue2封装自制组件（三）：输入框组件

一：index.vue组件代码

<template>
	<input :type="type" class="vi-input" :value="value" @input="handleinput" :disabled="disabled" :class="{ 'is-disabled': disabled }" />
</template>
<script>
	export default {
		name: 'ViInput',
		componentName: 'ViInput',
		props: {
			type: {
				type: String,
				default: 'text'//默认为文本输入框
			},
			value: {
				type: String,
				default: "",
			},
			disabled: {//禁用
				type: Boolean,
				default: false,
			},
		},
		methods: {
			handleinput(event) {
				//父组件在绑定v-model时，同时绑定input事件
				this.$emit("input", event.target.value);
			},
		}
	};
</script>

二：index.css中加入输入框样式

.vi-input {
	-webkit-appearance: none;
	background-color: #fff;
	background-image: none;
	border-radius: 10px;
	border: 1px solid #DCDFE6;
	box-sizing: border-box;
	color: #324A5D;
	display: inline-block;
	outline: none;
	padding: 8px 20px;
	transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	font-size: 13px;
	width: 240px;
	overflow: hidden;
}

.vi-input.is-disabled {
	background-color: #FAFAFA;
	cursor: not-allowed;
}

.vi-input:hover,
.vi-input:focus {
	border: 1px solid #C0C4CC;
}

三：按钮组件使用示例

<vi-input v-model="input" placeholder="请输入内容"></vi-input>
<vi-input v-model="input" type="password" placeholder="请输入内容 -- 秘密输入框"></vi-input>
<vi-input v-model="input" disabled placeholder="请输入内容 -- 禁用输入框"></vi-input>