Vue 封装组件之Input框

封装Input组件:MyInput.vue

<template><div class="base-input-wraper"><el-inputv-bind="$attrs"v-on="$listeners"class="e-input":style="inputStyle":value="value":size="size"@input="$emit('input', $event)"></el-input></div>
</template><script>
const sizeList = {medium: "36px",small: "32px",mini: "28px",
}
export default {name: "Input",props: {value: String,width: {type: Number,default: 240,},size: {type: String,default: "medium",},},computed: {inputStyle() {return {width: `${this.width}px`,}},wraperStyle() {return {height: sizeList[this.size],}},},
}
</script>
<style lang="scss" scoped>
.base-input-wraper {.e-input {input {border: none;outline: none;background: transparent;&:hover {border: none;outline: none;background: transparent;}}}
}
</style>

组件使用

  <Myinput v-model="form.name" placeholder="请输入内容":disabled="false" size="small" maxlength="5"></Myinput>