1. 基本用法:
<Input v-model="inputValue" placeholder="请输入内容" />
在上述例子中，v-model 用于绑定输入框的值，inputValue 是在 data 中定义的变量。
2. 禁用状态:
<Input v-model="inputValue" placeholder="请输入内容" disabled />
添加 disabled 属性可以禁用输入框。
3. 密码框:
<Input v-model="passwordValue" type="password" placeholder="请输入密码" />
使用 type="password" 可以创建密码框。
4. 带图标:
<Input v-model="inputValue" placeholder="请输入内容" prefix-icon="el-icon-search" />
使用 prefix-icon 属性可以在输入框前添加图标。
5. 可清空:
<Input v-model="inputValue" placeholder="请输入内容" clearable />
添加 clearable 属性可以在输入框后添加清空按钮。
6. 自适应高度:
<Input v-model="inputValue" type="textarea" autosize placeholder="请输入多行文本" />
使用 type="textarea" 可以创建多行文本输入框，通过 autosize 属性可以自适应高度。
7. 限制输入内容:
<Input v-model="inputValue" placeholder="只允许输入数字" :on-input="handleInput" />
通过监听 on-input 事件，可以在输入时限制输入内容。
methods: {
handleInput(value) {
// 限制只能输入数字
this.inputValue = value.replace(/[^\d]/g, '');
}
}
以上是一些常见的 Element-React Input 组件的用法示例。你可以根据具体需求在项目中使用它们，并根据 Element-React 文档进行详细配置和使用说明。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5600/Element-React