Vue 封装组件之Input框

封装Input组件:MyInput.vue

<template>
  <div class="base-input-wraper">
    <el-input
      v-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>