Element-ui Input 输入框

原文链接：https://note.noxussj.top/?source=sifo

通过鼠标或键盘输入字符

按需引入方式

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

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 输入框中也会实时更新对应的值。




export default {
    data() {
        return {
            value: ''
        }
    }
}

禁用状态

输入框不可用状态。




export default {
    data() {
        return {
            value: ''
        }
    }
}

密码框

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




export default {
    data() {
        return {
            value: ''
        }
    }
}

文本域

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




export default {
    data() {
        return {
            value: ''
        }
    }
}

输入长度限制

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




export default {
    data() {
        return {
            value: ''
        }
    }
}

Input Attributes