一: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>