Input输入框 - 图1

Input 输入框

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

何时使用

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

代码演示

基本用法

基本用法。

  1. <template>
  2.   <a-input v-model:value="value" placeholder="Basic usage" />
  3. </template>
  4. <script lang="ts">
  5. import { defineComponent, ref } from 'vue';
  6. export default defineComponent({
  7.   setup() {
  8.     const value = ref<string>('');
  9.     return {
  10.       value,
  11.     };
  12.   },
  13. });
  14. </script>

Input输入框 - 图2

前缀和后缀

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

  1. <template>
  2.   <div class="components-input-demo-presuffix">
  3.     <a-input placeholder="Basic usage" v-model:value="userName">
  4.       <template #prefix>
  5.         <user-outlined type="user" />
  6.       </template>
  7.       <template #suffix>
  8.         <a-tooltip title="Extra information">
  9.           <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
  10.         </a-tooltip>
  11.       </template>
  12.     </a-input>
  13.     <br />
  14.     <br />
  15.     <a-input prefix="￥" suffix="RMB" />
  16.   </div>
  17. </template>
  18. <script lang="ts">
  19. import { UserOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
  20. import { defineComponent, ref } from 'vue';
  21. export default defineComponent({
  22.   components: {
  23.     UserOutlined,
  24.     InfoCircleOutlined,
  25.   },
  27.   setup() {
  28.     const userName = ref<string>('');
  29.     return {
  30.       userName,
  31.     };
  32.   },
  33. });
  34. </script>

Input输入框 - 图3

搜索框 loading

用于 onSearch 的时候展示 loading。

  1. <template>
  2.   <div>
  3.     <a-input-search v-model:value="value" placeholder="input search loading deault" loading />
  4.     <br />
  5.     <br />
  6.     <a-input-search
  7.       v-model:value="value"
  8.       placeholder="input search loading with enterButton"
  9.       loading
  10.       enter-button
  11.     />
  12.   </div>
  13. </template>
  14. <script lang="ts">
  15. import { defineComponent, ref } from 'vue';
  16. export default defineComponent({
  17.   setup() {
  18.     const value = ref<string>('');
  19.     return {
  20.       value,
  21.     };
  22.   },
  23. });
  24. </script>

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 v-model:value="value1" />
  7.         </a-col>
  8.         <a-col :span="8">
  9.           <a-input v-model:value="value2" />
  10.         </a-col>
  11.       </a-row>
  12.     </a-input-group>
  13.     <br />
  14.     <a-input-group compact>
  15.       <a-input style="width: 20%" v-model:value="value1" />
  16.       <a-input style="width: 30%" v-model:value="value2" />
  17.     </a-input-group>
  18.     <br />
  19.     <a-input-group compact>
  20.       <a-select v-model:value="value3">
  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%" v-model:value="value4" />
  25.     </a-input-group>
  26.     <br />
  27.     <a-input-group compact>
  28.       <a-select v-model:value="value5">
  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%" v-model:value="value6" />
  33.     </a-input-group>
  34.     <br />
  35.     <a-input-group compact>
  36.       <a-input style="width: 50%" v-model:value="value7" />
  37.       <a-date-picker v-model:value="value8" style="width: 50%" />
  38.     </a-input-group>
  39.     <br />
  40.     <a-input-group compact>
  41.       <a-select v-model:value="value9">
  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 v-model:value="value10">
  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 v-model:value="value11">
  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
  57.         v-model:value="value12"
  58.         style="width: 100px; text-align: center"
  59.         placeholder="Minimum"
  60.       />
  61.       <a-input
  62.         v-model:value="value13"
  63.         style="width: 30px; border-left: 0; pointer-events: none; backgroundcolor: #fff"
  64.         placeholder="~"
  65.         disabled
  66.       />
  67.       <a-input
  68.         v-model:value="value14"
  69.         style="width: 100px; text-align: center; border-left: 0"
  70.         placeholder="Maximum"
  71.       />
  72.     </a-input-group>
  73.     <br />
  74.     <a-input-group compact>
  75.       <a-select v-model:value="value15">
  76.         <a-select-option value="Sign Up">Sign Up</a-select-option>
  77.         <a-select-option value="Sign In">Sign In</a-select-option>
  78.       </a-select>
  79.       <a-auto-complete
  80.         v-model:value="value16"
  81.         :data-source="dataSource"
  82.         style="width: 200px"
  83.         placeholder="Email"
  84.       />
  85.     </a-input-group>
  86.     <br />
  87.     <a-input-group compact>
  88.       <a-select v-model:value="value17" style="width: 30%">
  89.         <a-select-option value="Home">Home</a-select-option>
  90.         <a-select-option value="Company">Company</a-select-option>
  91.       </a-select>
  92.       <a-cascader
  93.         v-model:value="value18"
  94.         style="width: 70%"
  95.         :options="options"
  96.         placeholder="Select Address"
  97.       />
  98.     </a-input-group>
  99.   </div>
  100. </template>
  101. <script lang="ts">
  102. import { defineComponent, ref, watch } from 'vue';
  104. const options = [
  105.   {
  106.     value: 'zhejiang',
  107.     label: 'Zhejiang',
  108.     children: [
  109.       {
  110.         value: 'hangzhou',
  111.         label: 'Hangzhou',
  112.         children: [
  113.           {
  114.             value: 'xihu',
  115.             label: 'West Lake',
  116.           },
  117.         ],
  118.       },
  119.     ],
  120.   },
  121.   {
  122.     value: 'jiangsu',
  123.     label: 'Jiangsu',
  124.     children: [
  125.       {
  126.         value: 'nanjing',
  127.         label: 'Nanjing',
  128.         children: [
  129.           {
  130.             value: 'zhonghuamen',
  131.             label: 'Zhong Hua Men',
  132.           },
  133.         ],
  134.       },
  135.     ],
  136.   },
  137. ];
  138. export default defineComponent({
  139.   setup() {
  140.     const value1 = ref<string>('0571');
  141.     const value2 = ref<string>('26888888');
  142.     const value3 = ref<string>('Zhejiang');
  143.     const value4 = ref<string>('Xihu District, Hangzhou');
  144.     const value5 = ref<string>('Option1');
  145.     const value6 = ref<string>('input content');
  146.     const value7 = ref<string>('input content');
  147.     const value8 = ref<string | null>(null);
  148.     const value9 = ref<string>('Option1-1');
  149.     const value10 = ref<string>('Option2-2');
  150.     const value11 = ref<string>('1');
  151.     const value12 = ref<string>('');
  152.     const value13 = ref<string>('');
  153.     const value14 = ref<string>('');
  154.     const value15 = ref<string>('Sign Up');
  155.     const value16 = ref<string>('');
  156.     const value17 = ref<string>('Home');
  157.     const value18 = ref<string[]>([]);
  158.     const dataSource = ref<string[]>([]);
  160.     watch(value16, val => {
  161.       dataSource.value =
  162.         !val || val.indexOf('@') >= 0
  163.           ? []
  164.           : [`${val}@gmail.com`, `${val}@163.com`, `${val}@qq.com`];
  165.     });
  167.     return {
  168.       value1,
  169.       value2,
  170.       value3,
  171.       value4,
  172.       value5,
  173.       value6,
  174.       value7,
  175.       value8,
  176.       value9,
  177.       value10,
  178.       value11,
  179.       value12,
  180.       value13,
  181.       value14,
  182.       value15,
  183.       value16,
  184.       value17,
  185.       value18,
  186.       options,
  187.       dataSource,
  188.     };
  189.   },
  190. });
  191. </script>

输入时格式化展示

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

  1. <template>
  2.   <a-tooltip :trigger="['focus']" placement="topLeft" overlay-class-name="numeric-input">
  3.     <template v-if="inputValue" #title>
  4.       <span class="numeric-input-title">
  5.         {{ formatValue }}
  6.       </span>
  7.     </template>
  9.     <a-input
  10.       v-model:value="inputValue"
  11.       placeholder="Input a number"
  12.       :max-length="25"
  13.       style="width: 120px"
  14.       @blur="onBlur"
  15.     />
  16.   </a-tooltip>
  17. </template>
  18. <script lang="ts">
  19. import { computed, defineComponent, ref, watch } from 'vue';
  21. function formatNumber(value: string) {
  22.   value += '';
  23.   const list = value.split('.');
  24.   const prefix = list[0].charAt(0) === '-' ? '-' : '';
  25.   let num = prefix ? list[0].slice(1) : list[0];
  26.   let result = '';
  28.   while (num.length > 3) {
  29.     result = `,${num.slice(-3)}${result}`;
  30.     num = num.slice(0, num.length - 3);
  31.   }
  33.   if (num) {
  34.     result = num + result;
  35.   }
  37.   return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
  38. }
  40. export default defineComponent({
  41.   setup() {
  42.     const inputValue = ref<string>('111');
  43.     const formatValue = computed(() => {
  44.       if (inputValue.value === '-') return '-';
  45.       return formatNumber(inputValue.value);
  46.     });
  48.     const format = (val: string, preVal: string) => {
  49.       const reg = /^-?\d*(\.\d*)?$/;
  51.       if ((!isNaN(+val) && reg.test(val)) || val === '' || val === '-') {
  52.         inputValue.value = val;
  53.       } else {
  54.         inputValue.value = preVal;
  55.       }
  56.     };
  58.     // '.' at the end or only '-' in the input box.
  59.     const onBlur = () => {
  60.       if (
  61.         inputValue.value.charAt(inputValue.value.length - 1) === '.' ||
  62.         inputValue.value === '-'
  63.       ) {
  64.         format(inputValue.value.slice(0, -1), inputValue.value);
  65.       }
  66.     };
  68.     watch(inputValue, (val, preVal) => {
  69.       format(val, preVal);
  70.     });
  72.     return {
  73.       inputValue,
  74.       onBlur,
  75.       formatValue,
  76.     };
  77.   },
  78. });
  79. </script>
  80. <style>
  81. /* to prevent the arrow overflow the popup container,
  82. or the height is not enough when content is empty */
  83. .numeric-input .ant-tooltip-inner {
  84.   min-width: 32px;
  85.   min-height: 37px;
  86. }
  88. .numeric-input .numeric-input-title {
  89.   font-size: 14px;
  90. }
  91. </style>

Input输入框 - 图5

密码框

密码框。

  1. <template>
  2.   <a-input-password v-model:value="value" placeholder="input password" />
  3. </template>
  4. <script lang="ts">
  5. import { defineComponent, ref } from 'vue';
  6. export default defineComponent({
  7.   setup() {
  8.     const value = ref<string>('');
  9.     return {
  10.       value,
  11.     };
  12.   },
  13. });
  14. </script>

文本域

用于多行输入。

  1. <template>
  2.   <a-textarea v-model:value="value" placeholder="Basic usage" :rows="4" />
  3. </template>
  4. <script lang="ts">
  5. import { defineComponent, ref } from 'vue';
  6. export default defineComponent({
  7.   setup() {
  8.     const value = ref<string>('');
  9.     return {
  10.       value,
  11.     };
  12.   },
  13. });
  14. </script>

Input输入框 - 图6

适应文本高度的文本域

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

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

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

Input输入框 - 图7

搜索框

带有搜索按钮的输入框。

  1. <template>
  2.   <div>
  3.     <a-input-search
  4.       v-model:value="value"
  5.       placeholder="input search text"
  6.       style="width: 200px"
  7.       @search="onSearch"
  8.     />
  9.     <br />
  10.     <br />
  11.     <a-input-search
  12.       v-model:value="value"
  13.       placeholder="input search text"
  14.       enter-button
  15.       @search="onSearch"
  16.     />
  17.     <br />
  18.     <br />
  19.     <a-input-search
  20.       v-model:value="value"
  21.       placeholder="input search text"
  22.       enter-button="Search"
  23.       size="large"
  24.       @search="onSearch"
  25.     />
  26.     <br />
  27.     <br />
  28.     <a-input-search
  29.       v-model:value="value"
  30.       placeholder="input search text"
  31.       size="large"
  32.       @search="onSearch"
  33.     >
  34.       <template #enterButton>
  35.         <a-button>Custom</a-button>
  36.       </template>
  37.     </a-input-search>
  38.   </div>
  39. </template>
  40. <script lang="ts">
  41. import { defineComponent, ref } from 'vue';
  42. export default defineComponent({
  43.   setup() {
  44.     const value = ref<string>('');
  46.     const onSearch = (searchValue: string) => {
  47.       console.log('use value', searchValue);
  48.       console.log('or use this.value', value.value);
  49.     };
  51.     return {
  52.       value,
  53.       onSearch,
  54.     };
  55.   },
  56. });
  57. </script>

Input输入框 - 图8

三种大小

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

  1. <template>
  2.   <div class="components-input-demo-size">
  3.     <a-input v-model:value="value" size="large" placeholder="large size" />
  4.     <a-input v-model:value="value" placeholder="default size" />
  5.     <a-input v-model:value="value" size="small" placeholder="small size" />
  6.   </div>
  7. </template>
  8. <script lang="ts">
  9. import { defineComponent, ref } from 'vue';
  10. export default defineComponent({
  11.   setup() {
  12.     const value = ref<string>('');
  13.     return {
  14.       value,
  15.     };
  16.   },
  17. });
  18. </script>
  19. <style scoped>
  20. .components-input-demo-size .ant-input {
  21.   width: 200px;
  22.   margin: 0 8px 8px 0;
  23. }
  24. </style>

Input输入框 - 图9

前置/后置标签

用于配置一些固定组合。

  1. <template>
  2.   <div>
  3.     <div style="margin-bottom: 16px">
  4.       <a-input addon-before="Http://" addon-after=".com" v-model:value="value1" />
  5.     </div>
  6.     <div style="margin-bottom: 16px">
  7.       <a-input v-model:value="value2">
  8.         <template #addonBefore>
  9.           <a-select v-model:value="value3" style="width: 90px">
  10.             <a-select-option value="Http://">Http://</a-select-option>
  11.             <a-select-option value="Https://">Https://</a-select-option>
  12.           </a-select>
  13.         </template>
  14.         <template #addonAfter>
  15.           <a-select v-model:value="value4" style="width: 80px">
  16.             <a-select-option value=".com">.com</a-select-option>
  17.             <a-select-option value=".jp">.jp</a-select-option>
  18.             <a-select-option value=".cn">.cn</a-select-option>
  19.             <a-select-option value=".org">.org</a-select-option>
  20.           </a-select>
  21.         </template>
  22.       </a-input>
  23.     </div>
  24.     <div style="margin-bottom: 16px">
  25.       <a-input v-model:value="value5">
  26.         <template #addonAfter>
  27.           <setting-outlined />
  28.         </template>
  29.       </a-input>
  30.     </div>
  31.   </div>
  32. </template>
  33. <script lang="ts">
  34. import { SettingOutlined } from '@ant-design/icons-vue';
  35. import { defineComponent, ref } from 'vue';
  36. export default defineComponent({
  37.   components: {
  38.     SettingOutlined,
  39.   },
  41.   setup() {
  42.     const value1 = ref<string>('mysite');
  43.     const value2 = ref<string>('mysite');
  44.     const value3 = ref<string>('Http://');
  45.     const value4 = ref<string>('.com');
  46.     const value5 = ref<string>('mysite');
  47.     return {
  48.       value1,
  49.       value2,
  50.       value3,
  51.       value4,
  52.       value5,
  53.     };
  54.   },
  55. });
  56. </script>

Input输入框 - 图10

带移除图标

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

  1. <template>
  2.   <div>
  3.     <a-input v-model:value="value1" placeholder="input with clear icon" allow-clear />
  4.     <br />
  5.     <br />
  6.     <a-textarea v-model:value="value2" placeholder="textarea with clear icon" allow-clear />
  7.   </div>
  8. </template>
  9. <script lang="ts">
  10. import { defineComponent, ref } from 'vue';
  11. export default defineComponent({
  12.   setup() {
  13.     const value1 = ref<string>('');
  14.     const value2 = ref<string>('');
  16.     return {
  17.       value1,
  18.       value2,
  19.     };
  20.   },
  21. });
  22. </script>

Input输入框 - 图11

带字数提示的文本域

展示字数提示。

  1. <template>
  2.   <a-textarea v-model:value="value" showCount :maxlength="100" />
  3. </template>
  4. <script lang="ts">
  5. import { defineComponent, ref } from 'vue';
  6. export default defineComponent({
  7.   setup() {
  8.     const value = ref<string>('test value');
  9.     return {
  10.       value,
  11.     };
  12.   },
  13. });
  14. </script>

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
showCount是否展示字数booleanfalse

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