菜园前端

Appearance

Input 输入框 ​

通过鼠标或键盘输入字符

按需引入方式 ​

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

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

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

<script>
export default {
    data() {
        return {
            value: ''
        }
    }
}
</script>
<el-input v-model="value" placeholder="请输入内容"></el-input>

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

禁用状态 ​

输入框不可用状态。

vue
<el-input disabled 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 属性即可得到一个可切换显示隐藏的密码框。

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

<script>
export default {
    data() {
        return {
            value: ''
        }
    }
}
</script>
<el-input v-model="value" placeholder="请输入密码" show-password></el-input>

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

文本域 ​

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

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

<script>
export default {
    data() {
        return {
            value: ''
        }
    }
}
</script>
<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 属性来展示字数统计。

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

<script>
export default {
    data() {
        return {
            value: ''
        }
    }
}
</script>
<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类型stringtext
v-model绑定值string | number
maxlength原生属性，最大输入长度number
show-word-limit字数统计booleanfalse
placeholder输入框占位文本string
show-password是否显示切换密码图标booleanfalse
disabled禁用booleanfalse
rows输入框行数，只对 type="textarea" 有效number2
...