cloud-ui.vusion

# UInput 单行输入 - [示例](#示例) - [基本用法](#基本用法) - [加密](#加密) - [双向绑定](#双向绑定) - [只读和禁用](#只读和禁用) - [可清除](#可清除) - [展示方式](#展示方式) - [大小扩展](#大小扩展) - [添加图标](#添加图标) - [API]() - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [Methods](#methods) **Form** 基本的表单输入组件 ## 示例 ### 基本用法大部分属性与原生`<input>`控件一致。 ``` html <u-input maxlength="12" placeholder="1~12位小写字母" autofocus></u-input> ``` ### 加密将`type`属性设置为`password`可以加密显示，`password` 属性增加密码显示按钮。 ``` html <u-input type="password" password maxlength="12" placeholder="请输入密码"></u-input> ``` ### 双向绑定使用`v-model`或`:value.sync`进行双向绑定。提示：如果需要绑定的值自动转换为 number 类型，可以使用`number`修饰符。 ``` vue <template> <u-linear-layout> <u-input v-model="value" maxlength="12" placeholder="请输入端口号"></u-input> <u-input :value.sync="value" maxlength="12" placeholder="请输入端口号"></u-input> <u-input v-model.number="numberValue" maxlength="12" placeholder="请输入端口号"></u-input> </u-linear-layout> </template> <script> export default { data() { return { value: '3306', numberValue: 3306, }; }, }; </script> ``` ### 只读和禁用 ``` html <u-linear-layout> <u-input value="只读" readonly></u-input> <u-input value="禁用" disabled></u-input> </u-linear-layout> ``` ### 可清除开启`clearable`属性，在输入框有内容时会显示清空按钮。 ``` html <u-input value="可清除" clearable></u-input> ``` ### 展示方式默认为行内展示，可以将`display`设置为块级展示。 ``` html <u-linear-layout direction="vertical" gap="small"> <u-input maxlength="12" placeholder="行内展示（默认）"></u-input> 与文字对齐 <u-input display="block" maxlength="12" placeholder="块级展示"></u-input> </u-linear-layout> ``` ### 大小扩展由`width`和`height`设置输入框宽高，默认值为`normal`，候选值包括：`mini`、`small`、`normal`、`medium`、`large`、`huge`、`full`。 ``` html <u-linear-layout direction="vertical"> <u-linear-layout> <u-input width="mini" height="mini" value="width: mini, height:mini" readonly></u-input> <u-input width="small" height="mini" value="width: small, height: mini" readonly></u-input> <u-input width="normal" height="mini" value="width: normal, height: mini" readonly></u-input> <u-input width="medium" height="mini" value="width: medium, height: mini" readonly></u-input> </u-linear-layout> <u-linear-layout> <u-input width="mini" height="small" value="width: mini, height:small" readonly></u-input> <u-input width="small" height="small" value="width: small, height: small" readonly></u-input> <u-input width="normal" height="small" value="width: normal, height: small" readonly></u-input> <u-input width="medium" height="small" value="width: medium, height: small" readonly></u-input> </u-linear-layout> <u-linear-layout> <u-input width="mini" height="normal" value="width: mini, height:normal" readonly></u-input> <u-input width="small" height="normal" value="width: small, height: normal" readonly></u-input> <u-input width="normal" height="normal" value="width: normal, height: normal" readonly></u-input> <u-input width="medium" height="normal" value="width: medium, height: normal" readonly></u-input> </u-linear-layout> <u-linear-layout> <u-input width="mini" height="medium" value="width: mini, height:medium" readonly></u-input> <u-input width="small" height="medium" value="width: small, height: medium" readonly></u-input> <u-input width="normal" height="medium" value="width: normal, height: medium" readonly></u-input> <u-input width="medium" height="medium" value="width: medium, height: medium" readonly></u-input> </u-linear-layout> <u-linear-layout> <u-input width="large" height="large" value="width: large, height: large" readonly></u-input> </u-linear-layout> <u-linear-layout> <u-input width="huge" height="huge" value="width: huge, height: huge" readonly></u-input> </u-linear-layout> <u-linear-layout> <u-input width="full" height="full" value="width: full, height: full" readonly></u-input> </u-linear-layout> </u-linear-layout> ``` ### 添加图标 ```html <u-linear-layout>  <u-input prefix="search" clearable size="normal medium" placeholder="1~12位小写字母" autofocus></u-input>  <u-input suffix="search" clearable size="normal medium" placeholder="1~12位小写字母" autofocus></u-input> <u-input prefix="bug" clearable size="normal medium" placeholder="1~12位小写字母" autofocus></u-input> <u-input suffix="bug" clearable size="normal medium" placeholder="1~12位小写字母" autofocus></u-input> <u-input prefix="top" clearable size="normal medium" placeholder="1~12位小写字母" autofocus></u-input> <u-input prefix clearable size="normal medium" placeholder="1~12位小写字母" autofocus> <template #prefix> <span>111</span> </template> </u-input> </u-linear-layout> ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | minlength | number | | | | | spellcheck | boolean | | | 原生属性 | | maxlengthMessage | string | | | 输入内容达到上限时的错误提示，且被 [FormItem](#/components/u-form) 包裹时生效 | | type | string | `[object Object]`<br/>`[object Object]` | `'text'` | 文本框或者密码框 | | value.sync, v-model | string | | | 输入的值 | | placeholder | string | | | 为空时显示的占位符文本 | | maxlength | number | | | | | autofocus | boolean | | `false` | 设置是否自动获取焦点 | | prefix | icon | | `''` | | | suffix | icon | | `''` | | | clearable | boolean | | | 可点击清除按钮一键清除内容 | | password | boolean | | `false` | 显示状态分为“True(显示)/False(隐藏)”，默认为“显示” | | readonly | boolean | | `false` | 正常显示，但禁止选择/输入 | | disabled | boolean | | `false` | 置灰显示，且禁止任何交互（焦点、点击、选择、输入等） | | width | string | `[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]` | `'normal'` | 设置单行输入框宽度大小 | | height | string | `[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]` | `'normal'` | 设置单行输入框高度大小 | ### Slots #### (default) 插入 HTML 或 `Component`, 可展示额外内容。 ### Events #### @before-input 输入前触发。可以在这个阶段阻止输入，或者修改输入的值 $event.value | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.oldValue | string | 旧的值 | | $event.value | string | 输入框的值 | | $event.preventDefault | Function | 阻止输入流程 | | senderVM | UInput | 发送事件实例 | #### @input 输入时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | string | 输入框的值 | | senderVM | UInput | 发送事件实例 | #### @change 值变化时触发。（注意：与原生事件不同） | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | string | 改变后的值 | | $event.oldValue | string | 旧的值 | | senderVM | UInput | 发送事件实例 | #### @focus 获得焦点时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | FocusEvent | 原生事件对象 | | senderVM | UInput | 发送事件实例 | #### @blur 失去焦点时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | FocusEvent | 原生事件对象 | | senderVM | UInput | 发送事件实例 | #### @before-clear 清空前触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | string | 清空后的值 | | $event.oldValue | string | 待清空的值 | | $event.preventDefault | Function | 阻止清空流程 | | senderVM | UInput | 发送事件实例 | #### @clear 清空后触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.value | string | 清空后的值 | | $event.oldValue | string | 旧的值 | | senderVM | UInput | 发送事件实例 | #### @click-prefix 点击前缀图标后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 鼠标事件对象 | #### @click-suffix 点击后缀图标后触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 鼠标事件对象 | #### @keydown 键盘按键按下时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 键盘按键事件对象 | #### @keyup 键盘按键松开时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 键盘按键事件对象 | Methods #### focus() 让输入框获取焦点。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### blur() 让输入框失去焦点。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### clear() 清空输入框。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- |