关于前端:Elementui-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