nutui/src/packages/input/doc.md

Input 输入框组件

介绍

安装

import { createApp } from 'vue';
import { input } from '@nutui/nutui';

const app = createApp();
app.use(input);

代码演示

基础用法

双向绑定

<nut-input v-model:value="state.val1" @change="change" label="标题：" />

禁用和只读

<nut-input v-model:value="state.val2" @change="change"  disabled="true" label="标题："/>
<nut-input v-model:value="state.val3" @change="change" readonly="true"  label="标题："/>

限制输入长度

 <nut-input v-model:value="state.val4" @change="change" maxLength="7" label="限制7：" />

其他类型

<nut-input v-model:value="state.val0" @change="change" type="password" label="密码："/>
<nut-input v-model:value="state.val5" @change="change" type="digit" label="整数：" />
<nut-input v-model:value="state.val6" @change="change" type="digit" placeholder="支持小数点的输入" label="数字："/>

文本域

 <nut-input v-model:value="state.val7" @change="change" autosize="true" type="textarea" placeholder="文本域" label="留言："/>
<nut-input v-model:value="state.val7" @change="change" rows="5" type="textarea" placeholder="设置输入五行"  label="留言："/>

文本域字数统计

 <nut-input v-model:value="state.val8" @change="change" rows="5" limitShow="true" maxLength="20" type="textarea" placeholder="设置输入五行" label="留言："/>

参数	说明	类型	默认值
type	类型，可选值为 text textarea number 等	String	text
value	输入值，双向绑定	String	-
placeholder	为空时占位符	String	-
placeholder-style	placeholder 样式	String	-
label	左侧文案	string	-
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
clear-btn	是否带清除按钮（icon）	boolean	true
required	是否带必填的*号，且blur事件做非空校验	boolean	false
maxlength	限制最长输入字符	string/number	-
rows	textarea时高度	string/number	2
limit-show	textarea时是否展示输入字符。须设置maxlength	boolean	false

| change | 输入内容时触发 | function | - | | focus | 聚焦时触发 | function | - | | blur | 失焦时触发 | function | - | | clear | 点击清空时触发 | function | - |