Input输入框 - 图1

Input 输入框

通过鼠标或键盘输入内容，是最基础的表单域的包装。

何时使用

  • 需要用户输入表单域内容时。

  • 提供组合型输入框，带搜索的输入框，还可以进行大小选择。

    代码演示

基本使用

基本使用。

  1. <template>
  2.   <a-input placeholder="Basic usage" />
  3. </template>

Input输入框 - 图2

前缀和后缀

在输入框上添加前缀或后缀图标。

  1. <template>
  2.   <div class="components-input-demo-presuffix">
  3.     <a-input ref="userNameInput" v-model="userName" placeholder="Basic usage">
  4.       <a-icon slot="prefix" type="user" />
  5.       <a-tooltip slot="suffix" title="Extra information">
  6.         <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
  7.       </a-tooltip>
  8.     </a-input>
  9.     <br />
  10.     <br />
  11.     <a-input prefix="￥" suffix="RMB" />
  12.   </div>
  13. </template>
  15. <script>
  16. export default {
  17.   data() {
  18.     return {
  19.       userName: '',
  20.     };
  21.   },
  22.   methods: {
  23.     emitEmpty() {
  24.       this.$refs.userNameInput.focus();
  25.       this.userName = '';
  26.     },
  27.   },
  28. };
  29. </script>

Input输入框 - 图3

搜索框 loading

用于 onSearch 的时候展示 loading。

  1. <template>
  2.   <div>
  3.     <a-input-search placeholder="input search loading deault" loading />
  4.     <br />
  5.     <br />
  6.     <a-input-search placeholder="input search loading with enterButton" loading enter-button />
  7.   </div>
  8. </template>

Input输入框 - 图4

输入框组合

输入框的组合展现。
注意：使用 compact 模式时，不需要通过 Col 来控制宽度。 

  1. <template>
  2.   <div>
  3.     <a-input-group size="large">
  4.       <a-row :gutter="8">
  5.         <a-col :span="5">
  6.           <a-input default-value="0571" />
  7.         </a-col>
  8.         <a-col :span="8">
  9.           <a-input default-value="26888888" />
  10.         </a-col>
  11.       </a-row>
  12.     </a-input-group>
  13.     <br />
  14.     <a-input-group compact>
  15.       <a-input style="width: 20%" default-value="0571" />
  16.       <a-input style="width: 30%" default-value="26888888" />
  17.     </a-input-group>
  18.     <br />
  19.     <a-input-group compact>
  20.       <a-select default-value="Zhejiang">
  21.         <a-select-option value="Zhejiang">
  22.           Zhejiang
  23.         </a-select-option>
  24.         <a-select-option value="Jiangsu">
  25.           Jiangsu
  26.         </a-select-option>
  27.       </a-select>
  28.       <a-input style="width: 50%" default-value="Xihu District, Hangzhou" />
  29.     </a-input-group>
  30.     <br />
  31.     <a-input-group compact>
  32.       <a-select default-value="Option1">
  33.         <a-select-option value="Option1">
  34.           Option1
  35.         </a-select-option>
  36.         <a-select-option value="Option2">
  37.           Option2
  38.         </a-select-option>
  39.       </a-select>
  40.       <a-input style="width: 50%" default-value="input content" />
  41.     </a-input-group>
  42.     <br />
  43.     <a-input-group compact>
  44.       <a-input style="width: 50%" default-value="input content" />
  45.       <a-date-picker style="width: 50%" />
  46.     </a-input-group>
  47.     <br />
  48.     <a-input-group compact>
  49.       <a-select default-value="Option1-1">
  50.         <a-select-option value="Option1-1">
  51.           Option1-1
  52.         </a-select-option>
  53.         <a-select-option value="Option1-2">
  54.           Option1-2
  55.         </a-select-option>
  56.       </a-select>
  57.       <a-select default-value="Option2-2">
  58.         <a-select-option value="Option2-1">
  59.           Option2-1
  60.         </a-select-option>
  61.         <a-select-option value="Option2-2">
  62.           Option2-2
  63.         </a-select-option>
  64.       </a-select>
  65.     </a-input-group>
  66.     <br />
  67.     <a-input-group compact>
  68.       <a-select default-value="1">
  69.         <a-select-option value="1">
  70.           Between
  71.         </a-select-option>
  72.         <a-select-option value="2">
  73.           Except
  74.         </a-select-option>
  75.       </a-select>
  76.       <a-input style=" width: 100px; text-align: center" placeholder="Minimum" />
  77.       <a-input
  78.         style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
  79.         placeholder="~"
  80.         disabled
  81.       />
  82.       <a-input style="width: 100px; text-align: center; border-left: 0" placeholder="Maximum" />
  83.     </a-input-group>
  84.     <br />
  85.     <a-input-group compact>
  86.       <a-select default-value="Sign Up">
  87.         <a-select-option value="Sign Up">
  88.           Sign Up
  89.         </a-select-option>
  90.         <a-select-option value="Sign In">
  91.           Sign In
  92.         </a-select-option>
  93.       </a-select>
  94.       <a-auto-complete
  95.         :data-source="dataSource"
  96.         style="width: 200px"
  97.         placeholder="Email"
  98.         @change="handleChange"
  99.       />
  100.     </a-input-group>
  101.     <br />
  102.     <a-input-group compact>
  103.       <a-select style="width: 30%" default-value="Home">
  104.         <a-select-option value="Home">
  105.           Home
  106.         </a-select-option>
  107.         <a-select-option value="Company">
  108.           Company
  109.         </a-select-option>
  110.       </a-select>
  111.       <a-cascader style="width: 70%" :options="options" placeholder="Select Address" />
  112.     </a-input-group>
  113.   </div>
  114. </template>
  115. <script>
  116. const options = [
  117.   {
  118.     value: 'zhejiang',
  119.     label: 'Zhejiang',
  120.     children: [
  121.       {
  122.         value: 'hangzhou',
  123.         label: 'Hangzhou',
  124.         children: [
  125.           {
  126.             value: 'xihu',
  127.             label: 'West Lake',
  128.           },
  129.         ],
  130.       },
  131.     ],
  132.   },
  133.   {
  134.     value: 'jiangsu',
  135.     label: 'Jiangsu',
  136.     children: [
  137.       {
  138.         value: 'nanjing',
  139.         label: 'Nanjing',
  140.         children: [
  141.           {
  142.             value: 'zhonghuamen',
  143.             label: 'Zhong Hua Men',
  144.           },
  145.         ],
  146.       },
  147.     ],
  148.   },
  149. ];
  150. export default {
  151.   data() {
  152.     return {
  153.       options,
  154.       dataSource: [],
  155.     };
  156.   },
  157.   methods: {
  158.     handleChange(value) {
  159.       this.dataSource =
  160.         !value || value.indexOf('@') >= 0
  161.           ? []
  162.           : [`${value}@gmail.com`, `${value}@163.com`, `${value}@qq.com`];
  163.     },
  164.   },
  165. };
  166. </script>

Input输入框 - 图5

前置/后置标签

用于配置一些固定组合。

  1. <template>
  2.   <div>
  3.     <div style="margin-bottom: 16px">
  4.       <a-input addon-before="Http://" addon-after=".com" default-value="mysite" />
  5.     </div>
  6.     <div style="margin-bottom: 16px">
  7.       <a-input default-value="mysite">
  8.         <a-select slot="addonBefore" default-value="Http://" style="width: 90px">
  9.           <a-select-option value="Http://">
  10.             Http://
  11.           </a-select-option>
  12.           <a-select-option value="Https://">
  13.             Https://
  14.           </a-select-option>
  15.         </a-select>
  16.         <a-select slot="addonAfter" default-value=".com" style="width: 80px">
  17.           <a-select-option value=".com">
  18.             .com
  19.           </a-select-option>
  20.           <a-select-option value=".jp">
  21.             .jp
  22.           </a-select-option>
  23.           <a-select-option value=".cn">
  24.             .cn
  25.           </a-select-option>
  26.           <a-select-option value=".org">
  27.             .org
  28.           </a-select-option>
  29.         </a-select>
  30.       </a-input>
  31.     </div>
  32.     <div style="margin-bottom: 16px">
  33.       <a-input default-value="mysite">
  34.         <a-icon slot="addonAfter" type="setting" />
  35.       </a-input>
  36.     </div>
  37.   </div>
  38. </template>

Input输入框 - 图6

带移除图标

带移除图标的输入框，点击图标删除所有内容。

  1. <template>
  2.   <div>
  3.     <a-input placeholder="input with clear icon" allow-clear @change="onChange" />
  4.     <br />
  5.     <br />
  6.     <a-textarea placeholder="textarea with clear icon" allow-clear @change="onChange" />
  7.   </div>
  8. </template>
  9. <script>
  10. export default {
  11.   methods: {
  12.     onChange(e) {
  13.       console.log(e);
  14.     },
  15.   },
  16. };
  17. </script>

Input输入框 - 图7

适应文本高度的文本域

属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数。

1.5.0 后 autosize 被废弃，请使用 autoSize。

  1. <template>
  2.   <div>
  3.     <a-textarea placeholder="Autosize height based on content lines" auto-size />
  4.     <div style="margin: 24px 0" />
  5.     <a-textarea
  6.       placeholder="Autosize height with minimum and maximum number of lines"
  7.       :auto-size="{ minRows: 2, maxRows: 6 }"
  8.     />
  9.     <div style="margin: 24px 0" />
  10.     <a-textarea
  11.       v-model="value"
  12.       placeholder="Controlled autosize"
  13.       :auto-size="{ minRows: 3, maxRows: 5 }"
  14.     />
  15.   </div>
  16. </template>
  17. <script>
  18. export default {
  19.   data() {
  20.     return {
  21.       value: '',
  22.     };
  23.   },
  24. };
  25. </script>

Input输入框 - 图8

搜索框

带有搜索按钮的输入框。

  1. <template>
  2.   <div>
  3.     <a-input-search placeholder="input search text" style="width: 200px" @search="onSearch" />
  4.     <br /><br />
  5.     <a-input-search placeholder="input search text" enter-button @search="onSearch" />
  6.     <br /><br />
  7.     <a-input-search
  8.       placeholder="input search text"
  9.       enter-button="Search"
  10.       size="large"
  11.       @search="onSearch"
  12.     />
  13.     <br /><br />
  14.     <a-input-search placeholder="input search text" size="large" @search="onSearch">
  15.       <a-button slot="enterButton">
  16.         Custom
  17.       </a-button>
  18.     </a-input-search>
  19.   </div>
  20. </template>
  22. <script>
  23. export default {
  24.   methods: {
  25.     onSearch(value) {
  26.       console.log(value);
  27.     },
  28.   },
  29. };
  30. </script>

Input输入框 - 图9

三种大小

我们为 <Input/> 输入框定义了三种尺寸（大、默认、小），高度分别为 40px、32px 和 24px。

  1. <template>
  2.   <div class="components-input-demo-size">
  3.     <a-input size="large" placeholder="large size" />
  4.     <a-input placeholder="default size" />
  5.     <a-input size="small" placeholder="small size" />
  6.   </div>
  7. </template>
  8. <style scoped>
  9. .components-input-demo-size .ant-input {
  10.   width: 200px;
  11.   margin: 0 8px 8px 0;
  12. }
  13. </style>

文本域

用于多行输入。

  1. <template>
  2.   <a-textarea placeholder="Basic usage" :rows="4" />
  3. </template>

输入时格式化展示

结合 Tooltip 组件，实现一个数值输入框，方便内容超长时的全量展现。

  1. <template>
  2.   <a-tooltip :trigger="['focus']" placement="topLeft" overlay-class-name="numeric-input">
  3.     <span v-if="value" slot="title" class="numeric-input-title">
  4.       {{ value !== '-' ? formatNumber(value) : '-' }}
  5.     </span>
  6.     <template v-else slot="title">
  7.       Input a number
  8.     </template>
  9.     <a-input
  10.       :value="value"
  11.       placeholder="Input a number"
  12.       :max-length="25"
  13.       style="width: 120px"
  14.       @change="onChange"
  15.       @blur="onBlur"
  16.     />
  17.   </a-tooltip>
  18. </template>
  19. <script>
  20. function formatNumber(value) {
  21.   value += '';
  22.   const list = value.split('.');
  23.   const prefix = list[0].charAt(0) === '-' ? '-' : '';
  24.   let num = prefix ? list[0].slice(1) : list[0];
  25.   let result = '';
  26.   while (num.length > 3) {
  27.     result = `,${num.slice(-3)}${result}`;
  28.     num = num.slice(0, num.length - 3);
  29.   }
  30.   if (num) {
  31.     result = num + result;
  32.   }
  33.   return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
  34. }
  36. export default {
  37.   data() {
  38.     return {
  39.       value: '',
  40.     };
  41.   },
  42.   methods: {
  43.     formatNumber,
  44.     onChange(e) {
  45.       const { value } = e.target;
  46.       const reg = /^-?[0-9]*(\.[0-9]*)?$/;
  47.       if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
  48.         this.value = value;
  49.       }
  50.     },
  51.     // '.' at the end or only '-' in the input box.
  52.     onBlur() {
  53.       const { value, onChange } = this;
  54.       let valueTemp = value;
  55.       if (value.charAt(value.length - 1) === '.' || value === '-') {
  56.         onChange({ value: value.slice(0, -1) });
  57.       }
  58.     },
  59.   },
  60. };
  61. </script>
  62. <style>
  63. /* to prevent the arrow overflow the popup container,
  64. or the height is not enough when content is empty */
  65. .numeric-input .ant-tooltip-inner {
  66.   min-width: 32px;
  67.   min-height: 37px;
  68. }
  70. .numeric-input .numeric-input-title {
  71.   font-size: 14px;
  72. }
  73. </style>

Input输入框 - 图10

密码框

密码框,版本 1.4.0 中新增。

  1. <template>
  2.   <a-input-password placeholder="input password" />
  3. </template>

API

Input

参数说明类型默认值版本
addonAfter带标签的 input，设置后置标签string|slot
addonBefore带标签的 input，设置前置标签string|slot
defaultValue输入框默认内容string
disabled是否禁用状态，默认为 falsebooleanfalse
id输入框的 idstring
maxLength最大长度number1.5.0
prefix带有前缀图标的 inputstring|slot
size控件大小。注：标准表单内的输入框大小限制为 large。可选 large default smallstringdefault
suffix带有后缀图标的 inputstring|slot
type声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 Input.TextArea 代替 type=”textarea”)。stringtext
value(v-model)输入框内容string
allowClear可以点击清除图标删除内容boolean

Input 事件

事件名称说明回调参数
change输入框内容变化时的回调function(e)
pressEnter按下回车的回调function(e)

如果 Input 在 Form.Item 内，并且 Form.Item 设置了 id 和 options 属性，则 value defaultValue 和 id 属性会被自动设置。

Input.TextArea

参数说明类型默认值版本
autosize自适应内容高度，可设置为 true|false 或对象：{ minRows: 2, maxRows: 6 }boolean|objectfalse
defaultValue输入框默认内容string
value(v-model)输入框内容string
allowClear可以点击清除图标删除内容boolean1.5.0

Input.TextArea 事件

事件名称说明回调参数
pressEnter按下回车的回调function(e)

Input.TextArea 的其他属性和浏览器自带的 textarea 一致。

Input.Search

参数说明类型默认值版本
enterButton是否有确认按钮，可设为按钮文字。该属性会与 addon 冲突。boolean|slotfalse
loading搜索 loadingboolean1.5.0

Input.Search 事件

事件名称说明回调参数
search点击搜索或按下回车键时的回调function(value, event)

其余属性和 Input 一致。

Input.Group

参数说明类型默认值
compact是否用紧凑模式booleanfalse
sizeInput.Group 中所有的 Input 的大小，可选 large default smallstringdefault
  1. <a-input-group>
  2.   <a-input />
  3.   <a-input />
  4. </a-input-group>

Input.Password (1.14.0 中新增)

参数说明类型默认值
visibilityToggle是否显示切换按钮booleantrue