Input 输入框

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

何时使用

  • 需要用户输入表单域内容时。
  • 提供组合型输入框，带搜索的输入框，还可以进行大小选择。

代码演示

Input 输入框 - 图1

基本使用

基本使用。

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

Input 输入框 - 图2

适应文本高度的文本域

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

  1. <template>
  2.   <div>
  3.     <a-textarea placeholder="Autosize height based on content lines" autosize />
  4.     <div style="margin: 24px 0" />
  5.     <a-textarea
  6.       placeholder="Autosize height with minimum and maximum number of lines"
  7.       :autosize="{ minRows: 2, maxRows: 6 }"
  8.     />
  9.   </div>
  10. </template>

Input 输入框 - 图3

前缀和后缀

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

  1. <template>
  2.   <div class="components-input-demo-presuffix">
  3.     <a-input placeholder="Basic usage" v-model="userName" ref="userNameInput">
  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.   </div>
  10. </template>
  12. <script>
  13.   export default {
  14.     data() {
  15.       return {
  16.         userName: '',
  17.       };
  18.     },
  19.     methods: {
  20.       emitEmpty() {
  21.         this.$refs.userNameInput.focus();
  22.         this.userName = '';
  23.       },
  24.     },
  25.   };
  26. </script>
  27. <style scoped>
  28.   .components-input-demo-presuffix .anticon-close-circle {
  29.     cursor: pointer;
  30.     color: #ccc;
  31.     transition: color 0.3s;
  32.     font-size: 12px;
  33.   }
  34.   .components-input-demo-presuffix .anticon-close-circle:hover {
  35.     color: #999;
  36.   }
  37.   .components-input-demo-presuffix .anticon-close-circle:active {
  38.     color: #666;
  39.   }
  40. </style>

Input 输入框 - 图4

搜索框

带有搜索按钮的输入框。

  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" @search="onSearch" enterButton />
  6.     <br /><br />
  7.     <a-input-search
  8.       placeholder="input search text"
  9.       @search="onSearch"
  10.       enterButton="Search"
  11.       size="large"
  12.     />
  13.     <br /><br />
  14.     <a-input-search placeholder="input search text" @search="onSearch" size="large">
  15.       <a-button slot="enterButton">Custom</a-button>
  16.     </a-input-search>
  17.   </div>
  18. </template>
  20. <script>
  21.   export default {
  22.     methods: {
  23.       onSearch(value) {
  24.         console.log(value);
  25.       },
  26.     },
  27.   };
  28. </script>

Input 输入框 - 图5

三种大小

我们为 <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>

Input 输入框 - 图6

输入框组合

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

Input 输入框 - 图7

文本域

用于多行输入。

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

Input 输入框 - 图8

前置/后置标签

用于配置一些固定组合。

  1. <template>
  2.   <div>
  3.     <div style="margin-bottom: 16px">
  4.       <a-input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
  5.     </div>
  6.     <div style="margin-bottom: 16px">
  7.       <a-input defaultValue="mysite">
  8.         <a-select slot="addonBefore" defaultValue="Http://" style="width: 90px">
  9.           <a-select-option value="Http://">Http://</a-select-option>
  10.           <a-select-option value="Https://">Https://</a-select-option>
  11.         </a-select>
  12.         <a-select slot="addonAfter" defaultValue=".com" style="width: 80px">
  13.           <a-select-option value=".com">.com</a-select-option>
  14.           <a-select-option value=".jp">.jp</a-select-option>
  15.           <a-select-option value=".cn">.cn</a-select-option>
  16.           <a-select-option value=".org">.org</a-select-option>
  17.         </a-select>
  18.       </a-input>
  19.     </div>
  20.     <div style="margin-bottom: 16px">
  21.       <a-input defaultValue="mysite">
  22.         <a-icon slot="addonAfter" type="setting" />
  23.       </a-input>
  24.     </div>
  25.   </div>
  26. </template>

Input 输入框 - 图9

输入时格式化展示

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

  1. <template>
  2.   <a-tooltip :trigger="['focus']" placement="topLeft" overlayClassName="numeric-input">
  3.     <span slot="title" v-if="value" class="numeric-input-title">
  4.       {{value !== '-' ? formatNumber(value) : '-'}}
  5.     </span>
  6.     <template slot="title" v-else>
  7.       Input a number
  8.     </template>
  9.     <a-input
  10.       :value="value"
  11.       @change="onChange"
  12.       @blur="onBlur"
  13.       placeholder="Input a number"
  14.       :maxLength="25"
  15.       style="width: 120px"
  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|[1-9][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.         if (value.charAt(value.length - 1) === '.' || value === '-') {
  55.           onChange({ value: value.slice(0, -1) });
  56.         }
  57.       },
  58.     },
  59.   };
  60. </script>
  61. <style>
  62.   /* to prevent the arrow overflow the popup container,
  63. or the height is not enough when content is empty */
  64.   .numeric-input .ant-tooltip-inner {
  65.     min-width: 32px;
  66.     min-height: 37px;
  67.   }
  69.   .numeric-input .numeric-input-title {
  70.     font-size: 14px;
  71.   }
  72. </style>

Input 输入框 - 图10

带移除图标

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

<template>
  <a-input placeholder="input with clear icon" allowClear @change="onChange" />
</template>
<script>
  export default {
    methods: {
      onChange(e) {
        console.log(e);
      },
    },
  };
</script>

Input 输入框 - 图11

密码框

密码框,版本 1.4.0 中新增。

<template>
  <a-input-password placeholder="input password" />
</template>

API

Input

参数说明类型默认值
addonAfter带标签的 input，设置后置标签string|slot
addonBefore带标签的 input，设置前置标签string|slot
defaultValue输入框默认内容string
disabled是否禁用状态，默认为 falsebooleanfalse
id输入框的 idstring
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

Input.TextArea 事件

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

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

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

Input.Search 事件

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

其余属性和 Input 一致。

Input.Group

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

Input.Password (1.14.0 中新增)

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