Input  输入框

---

通过鼠标或键盘输入字符

input 为受控组件，它总会显示 Vue 绑定值。

通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变，不支持 v-model 修饰符。

基础用法

<template><el-input v-model="input" placeholder="请输入内容"></el-input>
</template><script>import { defineComponent, ref } from 'vue'export default defineComponent({setup() {return {input: ref(''),}},})
</script>

<el-input 
v-model="user.name" 
prefix-icon="UserFilled" 
placeholder="请输入账号" 
clearable
>
</el-input><el-input 
v-model="user.password" 
prefix-icon="Lock" 
placeholder="请输入密码" 
clearable 
show-password
>
</el-input><script>
export default ({data() {return{user:{name: '',password: '' }}},methods:{}
})
</script>

可清空

---

 使用clearable属性即可得到一个可清空的输入框

<template><el-input placeholder="请输入内容" v-model="input" clearable> </el-input>
</template><script>import { defineComponent, ref } from 'vue'export default defineComponent({setup() {return {input: ref(''),}},})
</script>

密码框

---

使用show-password属性即可得到一个可切换显示隐藏的密码框 

<template><el-input placeholder="请输入密码" v-model="input" show-password></el-input>
</template><script>import { defineComponent, ref } from 'vue'export default defineComponent({setup() {return {input: ref(''),}},})
</script>

带 icon 的输入框

---

带有图标标记输入类型

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。 

<template><div class="demo-input-suffix">属性方式：<el-inputplaceholder="请选择日期"suffix-icon="el-icon-date"v-model="input1"></el-input><el-inputplaceholder="请输入内容"prefix-icon="el-icon-search"v-model="input2"></el-input>
</div>
<div class="demo-input-suffix">slot 方式：<el-input placeholder="请选择日期" v-model="input3"><template #suffix><i class="el-input__icon el-icon-date"></i></template></el-input><el-input placeholder="请输入内容" v-model="input4"><template #prefix><i class="el-input__icon el-icon-search"></i></template></el-input>
</div>
</template><script>import { defineComponent, ref } from 'vue'export default defineComponent({setup() {return {input1: ref(''),input2: ref(''),input3: ref(''),input4: ref(''),}},})
</script>
<style>.demo-input-label {display: inline-block;width: 130px;}
</style>