Element-ui Input 输入框

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

<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

---

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