饿了么input框的使用

• input是开发中常用的标签，但是不同的场景所需要input对应的方法也不相同，饿了么这趟框架其实还是蛮好用的，基本满足了大家的需求，这里想要稍作总结一下

1. input框需要有提示

<el-input
  placeholder="请输入内容"
  v-model="input1">
</el-input>

<script>
export default {
  data() {
    return {
      input1: ''
    }
  }
}
</script>

  2. 某种状态下将input设置为禁用

<el-input
  placeholder="请输入内容"
  v-model="input1"
  :disabled="true">
</el-input>

<script>
export default {
  data() {
    return {
      input1: ''
    }
  }
}
</script>

 3. 用户输入后右侧有差号提示清空

         

<el-input
  placeholder="请输入内容"
  v-model="input10"
  clearable>
</el-input>

<script>
  export default {
    data() {
      return {
        input10: ''
      }
    }
  }
</script>

 4. input输入框需要带有某种样式图

     

<div class="demo-input-suffix">
  属性方式：
  <el-input
    placeholder="请选择日期"
    suffix-icon="el-icon-date"
    v-model="input2">
  </el-input>
  <el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="input21">
  </el-input>
</div>
<div class="demo-input-suffix">
  slot 方式：
  <el-input
    placeholder="请选择日期"
    v-model="input22">
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </el-input>
  <el-input
    placeholder="请输入内容"
    v-model="input23">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
</div>

<script>
export default {
  data() {
    return {
      input2: '',
      input21: '',
      input22: '',
      input23: ''
    }
  }
}
</script>

  5. input的大小不想设置为一行，可多行输入但需提前定义高度(type="textarea"和：row=“2”)

<el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="textarea">
</el-input>

<script>
export default {
  data() {
    return {
      textarea: ''
    }
  }
}
</script>

6. input的初始高度为1行，但随着用户的输入变多换行

<el-input
  type="textarea"
  autosize
  placeholder="请输入内容"
  v-model="textarea2">
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="请输入内容"
  v-model="textarea3">
</el-input>

<script>
export default {
  data() {
    return {
      textarea2: '',
      textarea3: ''
    }
  }
}
</script>

 7. 当用户不在当前输入框输入的时候对用户的数据进行处理，不需要依靠于下一步事件触发

<el-input 
    v-model="input" 
    placeholder="请输入内容"
    @change="method"
></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  },
  methods: {
    method() {
      // 各种处理this.input
    }
  }
}
</script>

总结：很多自带的api，自己可以多去尝试总结