Input 输入框

通过鼠标或键盘输入字符

按需引入方式

如果是完整引入可跳过此步骤

import Vue from 'vue'
import { Input } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/input.css'

Vue.use(Input)

基础使用

当 value 的值在 script 中被修改了，那么 input 输入框中也会实时更新对应的值。

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

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

禁用状态

输入框不可用状态。

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

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

注意

在浅色模式中会更加明显看到禁用样式。

密码框

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

<el-input v-model="value" placeholder="请输入密码" show-password></el-input>

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

文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea。

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

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

输入长度限制

maxlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。

<el-input
    type="text"
    v-model="value"
    placeholder="请输入内容"
    maxlength="10"
    show-word-limit
></el-input>

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

Input Attributes

参数	说明	类型	默认值
type	类型	string	text
v-model	绑定值	string | number
maxlength	原生属性，最大输入长度	number
show-word-limit	字数统计	boolean	false
placeholder	输入框占位文本	string
show-password	是否显示切换密码图标	boolean	false
disabled	禁用	boolean	false
rows	输入框行数，只对 type="textarea" 有效	number	2
...