用Vue2.0编写一个el-input的组件封装

以下是一个简单的el-input组件的封装，使用Vue2.0：

<template>
  <div class="custom-input">
    <label>{{ label }}</label>
    <el-input v-model="value" :placeholder="placeholder"></el-input>
  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  }
}
</script>

<style>
.custom-input {
  display: flex;
  flex-direction: column;
}
.custom-input label {
  margin-bottom: 10px;
}
</style>

使用方法：

<template>
  <div>
    <custom-input v-model="name" label="Name" placeholder="Enter your name"></custom-input>
  </div>
</template>

<script>
import CustomInput from '@/components/CustomInput.vue'

export default {
  name: 'MyComponent',
  components: {
    CustomInput
  },
  data() {
    return {
      name: ''
    }
  }
}
</script>

在上面的例子中，我们将el-input作为子组件嵌入到自定义组件中，并使用props传递数据。我们还为自定义组件添加了一些样式来使其看起来更好看。