vue封装的input组件代码，以供大家参考
<template>
<input
type="text"
class="input-warpper"
:placeholder="placeholder"
:value="inputValue"
@input="getInputValue"
/>
</template>
<script>
export default {
name: 'PaperInput',
props: {
/** input框的value值 */
value: {
type: [String, undefined],
default: undefined,
},
placeholder: {
type: String,
default: '请输入内容',
},
},
data() {
return {
inputValue: this.value,
};
},
methods: {
getInputValue(e) {
const event = e || window.event;
const target = event.srcElement || event.taget;
this.inputValue = target.value;
this.$emit('change', this.inputValue);
},
},
};
</script>
<style lang="less">
.input-warpper {
width: 100%;
background-color: #fafafa;
height: 40px;
border: none;
border-radius: 4px;
// outline: 1px solid chartreuse;
padding: 10px;
// &:hover {
// border: 1px solid @primary-color;
// }
/* WebKit, Blink, Edge */
&::-webkit-input-placeholder {
color: #bababa;
}
/* Mozilla Firefox 4 to 18 */
&:-moz-placeholder {
color: #bababa;
}
/* Mozilla Firefox 19+ */
&::-moz-placeholder {
color: #bababa;
}
/* Internet Explorer 10-11 */
&:-ms-input-placeholder {
color: #bababa;
}
}
</style>
使用方式
<template>
/** @change获取input组件的value值 */
<scf-input :value="inputValue" @change="onInputValueChange" />
</template>
<script>
import PaperInput from '@/components/paper-input/paper-input';
export default {
name: 'PaperUi',
components: {
'scf-input': PaperInput,
},
data() {
return {
inputValue: '测试用值',
};
},
methods: {
onInputValueChange(value) {
this.inputValue = value;
},
},
};
</script>
