Input 输入框

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

何时使用

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

代码演示

基本用法

基本用法。

<template>
  <a-input v-model:value="value" placeholder="Basic usage" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<string>('');
    return {
      value,
    };
  },
});
</script>


￥RMB
前缀和后缀

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

<template>
  <div class="components-input-demo-presuffix">
    <a-input placeholder="Basic usage" v-model:value="userName">
      <template #prefix>
        <user-outlined type="user" />
      </template>
      <template #suffix>
        <a-tooltip title="Extra information">
          <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
        </a-tooltip>
      </template>
    </a-input>
    <br />
    <br />
    <a-input prefix="￥" suffix="RMB" />
  </div>
</template>
<script lang="ts">
import { UserOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {
    UserOutlined,
    InfoCircleOutlined,
  }, 
  setup() {
    const userName = ref<string>('');
    return {
      userName,
    };
  },
});
</script>


搜索框 loading

用于 onSearch 的时候展示 loading。

<template>
  <div>
    <a-input-search v-model:value="value" placeholder="input search loading deault" loading />
    <br />
    <br />
    <a-input-search
      v-model:value="value"
      placeholder="input search loading with enterButton"
      loading
      enter-button
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<string>('');
    return {
      value,
    };
  },
});
</script>


Zhejiang

Option1


Option1-1
Option2-2

Between

Sign Up
Email

Home
输入框组合

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

<template>
  <div>
    <a-input-group size="large">
      <a-row :gutter="8">
        <a-col :span="5">
          <a-input v-model:value="value1" />
        </a-col>
        <a-col :span="8">
          <a-input v-model:value="value2" />
        </a-col>
      </a-row>
    </a-input-group>
    <br />
    <a-input-group compact>
      <a-input style="width: 20%" v-model:value="value1" />
      <a-input style="width: 30%" v-model:value="value2" />
    </a-input-group>
    <br />
    <a-input-group compact>
      <a-select v-model:value="value3">
        <a-select-option value="Zhejiang">Zhejiang</a-select-option>
        <a-select-option value="Jiangsu">Jiangsu</a-select-option>
      </a-select>
      <a-input style="width: 50%" v-model:value="value4" />
    </a-input-group>
    <br />
    <a-input-group compact>
      <a-select v-model:value="value5">
        <a-select-option value="Option1">Option1</a-select-option>
        <a-select-option value="Option2">Option2</a-select-option>
      </a-select>
      <a-input style="width: 50%" v-model:value="value6" />
    </a-input-group>
    <br />
    <a-input-group compact>
      <a-input style="width: 50%" v-model:value="value7" />
      <a-date-picker v-model:value="value8" style="width: 50%" />
    </a-input-group>
    <br />
    <a-input-group compact>
      <a-select v-model:value="value9">
        <a-select-option value="Option1-1">Option1-1</a-select-option>
        <a-select-option value="Option1-2">Option1-2</a-select-option>
      </a-select>
      <a-select v-model:value="value10">
        <a-select-option value="Option2-1">Option2-1</a-select-option>
        <a-select-option value="Option2-2">Option2-2</a-select-option>
      </a-select>
    </a-input-group>
    <br />
    <a-input-group compact>
      <a-select v-model:value="value11">
        <a-select-option value="1">Between</a-select-option>
        <a-select-option value="2">Except</a-select-option>
      </a-select>
      <a-input
        v-model:value="value12"
        style="width: 100px; text-align: center"
        placeholder="Minimum"
      />
      <a-input
        v-model:value="value13"
        style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff"
        placeholder="~"
        disabled
      />
      <a-input
        v-model:value="value14"
        style="width: 100px; text-align: center; border-left: 0"
        placeholder="Maximum"
      />
    </a-input-group>
    <br />
    <a-input-group compact>
      <a-select v-model:value="value15">
        <a-select-option value="Sign Up">Sign Up</a-select-option>
        <a-select-option value="Sign In">Sign In</a-select-option>
      </a-select>
      <a-auto-complete
        v-model:value="value16"
        :data-source="dataSource"
        style="width: 200px"
        placeholder="Email"
      />
    </a-input-group>
    <br />
    <a-input-group compact>
      <a-select v-model:value="value17" style="width: 30%">
        <a-select-option value="Home">Home</a-select-option>
        <a-select-option value="Company">Company</a-select-option>
      </a-select>
      <a-cascader
        v-model:value="value18"
        style="width: 70%"
        :options="options"
        placeholder="Select Address"
      />
    </a-input-group>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'; 
const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];
export default defineComponent({
  setup() {
    const value1 = ref<string>('0571');
    const value2 = ref<string>('26888888');
    const value3 = ref<string>('Zhejiang');
    const value4 = ref<string>('Xihu District, Hangzhou');
    const value5 = ref<string>('Option1');
    const value6 = ref<string>('input content');
    const value7 = ref<string>('input content');
    const value8 = ref<string | null>(null);
    const value9 = ref<string>('Option1-1');
    const value10 = ref<string>('Option2-2');
    const value11 = ref<string>('1');
    const value12 = ref<string>('');
    const value13 = ref<string>('');
    const value14 = ref<string>('');
    const value15 = ref<string>('Sign Up');
    const value16 = ref<string>('');
    const value17 = ref<string>('Home');
    const value18 = ref<string[]>([]);
    const dataSource = ref<string[]>([]); 
    watch(value16, val => {
      dataSource.value =
        !val || val.indexOf('@') >= 0
          ? []
          : [`${val}@gmail.com`, `${val}@163.com`, `${val}@qq.com`];
    }); 
    return {
      value1,
      value2,
      value3,
      value4,
      value5,
      value6,
      value7,
      value8,
      value9,
      value10,
      value11,
      value12,
      value13,
      value14,
      value15,
      value16,
      value17,
      value18,
      options,
      dataSource,
    };
  },
});
</script>
输入时格式化展示

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

<template>
  <a-tooltip :trigger="['focus']" placement="topLeft" overlay-class-name="numeric-input">
    <template v-if="inputValue" #title>
      <span class="numeric-input-title">
        {{ formatValue }}
      </span>
    </template> 
    <a-input
      v-model:value="inputValue"
      placeholder="Input a number"
      :max-length="25"
      style="width: 120px"
      @blur="onBlur"
    />
  </a-tooltip>
</template>
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'; 
function formatNumber(value: string) {
  value += '';
  const list = value.split('.');
  const prefix = list[0].charAt(0) === '-' ? '-' : '';
  let num = prefix ? list[0].slice(1) : list[0];
  let result = ''; 
  while (num.length > 3) {
    result = `,${num.slice(-3)}${result}`;
    num = num.slice(0, num.length - 3);
  } 
  if (num) {
    result = num + result;
  } 
  return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
} 
export default defineComponent({
  setup() {
    const inputValue = ref<string>('111');
    const formatValue = computed(() => {
      if (inputValue.value === '-') return '-';
      return formatNumber(inputValue.value);
    }); 
    const format = (val: string, preVal: string) => {
      const reg = /^-?\d*(\.\d*)?$/; 
      if ((!isNaN(+val) && reg.test(val)) || val === '' || val === '-') {
        inputValue.value = val;
      } else {
        inputValue.value = preVal;
      }
    }; 
    // '.' at the end or only '-' in the input box.
    const onBlur = () => {
      if (
        inputValue.value.charAt(inputValue.value.length - 1) === '.' ||
        inputValue.value === '-'
      ) {
        format(inputValue.value.slice(0, -1), inputValue.value);
      }
    }; 
    watch(inputValue, (val, preVal) => {
      format(val, preVal);
    }); 
    return {
      inputValue,
      onBlur,
      formatValue,
    };
  },
});
</script>
<style>
/* to prevent the arrow overflow the popup container,
or the height is not enough when content is empty */
.numeric-input .ant-tooltip-inner {
  min-width: 32px;
  min-height: 37px;
} 
.numeric-input .numeric-input-title {
  font-size: 14px;
}
</style>
密码框

密码框。

<template>
  <a-input-password v-model:value="value" placeholder="input password" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<string>('');
    return {
      value,
    };
  },
});
</script>
文本域

用于多行输入。

<template>
  <a-textarea v-model:value="value" placeholder="Basic usage" :rows="4" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<string>('');
    return {
      value,
    };
  },
});
</script>
适应文本高度的文本域

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

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

<template>
  <div>
    <a-textarea
      v-model:value="value1"
      placeholder="Autosize height based on content lines"
      auto-size
    />
    <div style="margin: 24px 0" />
    <a-textarea
      v-model:value="value2"
      placeholder="Autosize height with minimum and maximum number of lines"
      :auto-size="{ minRows: 2, maxRows: 5 }"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value1 = ref<string>('');
    const value2 = ref<string>('');
    return {
      value1,
      value2,
    };
  },
});
</script>






搜索框

带有搜索按钮的输入框。

<template>
  <div>
    <a-input-search
      v-model:value="value"
      placeholder="input search text"
      style="width: 200px"
      @search="onSearch"
    />
    <br />
    <br />
    <a-input-search
      v-model:value="value"
      placeholder="input search text"
      enter-button
      @search="onSearch"
    />
    <br />
    <br />
    <a-input-search
      v-model:value="value"
      placeholder="input search text"
      enter-button="Search"
      size="large"
      @search="onSearch"
    />
    <br />
    <br />
    <a-input-search
      v-model:value="value"
      placeholder="input search text"
      size="large"
      @search="onSearch"
    >
      <template #enterButton>
        <a-button>Custom</a-button>
      </template>
    </a-input-search>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<string>(''); 
    const onSearch = (searchValue: string) => {
      console.log('use value', searchValue);
      console.log('or use this.value', value.value);
    }; 
    return {
      value,
      onSearch,
    };
  },
});
</script>
三种大小

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

<template>
  <div class="components-input-demo-size">
    <a-input v-model:value="value" size="large" placeholder="large size" />
    <a-input v-model:value="value" placeholder="default size" />
    <a-input v-model:value="value" size="small" placeholder="small size" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<string>('');
    return {
      value,
    };
  },
});
</script>
<style scoped>
.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}
</style>
Http://.com
Http://
.com
前置/后置标签

用于配置一些固定组合。

<template>
  <div>
    <div style="margin-bottom: 16px">
      <a-input addon-before="Http://" addon-after=".com" v-model:value="value1" />
    </div>
    <div style="margin-bottom: 16px">
      <a-input v-model:value="value2">
        <template #addonBefore>
          <a-select v-model:value="value3" style="width: 90px">
            <a-select-option value="Http://">Http://</a-select-option>
            <a-select-option value="Https://">Https://</a-select-option>
          </a-select>
        </template>
        <template #addonAfter>
          <a-select v-model:value="value4" style="width: 80px">
            <a-select-option value=".com">.com</a-select-option>
            <a-select-option value=".jp">.jp</a-select-option>
            <a-select-option value=".cn">.cn</a-select-option>
            <a-select-option value=".org">.org</a-select-option>
          </a-select>
        </template>
      </a-input>
    </div>
    <div style="margin-bottom: 16px">
      <a-input v-model:value="value5">
        <template #addonAfter>
          <setting-outlined />
        </template>
      </a-input>
    </div>
  </div>
</template>
<script lang="ts">
import { SettingOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {
    SettingOutlined,
  }, 
  setup() {
    const value1 = ref<string>('mysite');
    const value2 = ref<string>('mysite');
    const value3 = ref<string>('Http://');
    const value4 = ref<string>('.com');
    const value5 = ref<string>('mysite');
    return {
      value1,
      value2,
      value3,
      value4,
      value5,
    };
  },
});
</script>


带移除图标

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

<template>
  <div>
    <a-input v-model:value="value1" placeholder="input with clear icon" allow-clear />
    <br />
    <br />
    <a-textarea v-model:value="value2" placeholder="textarea with clear icon" allow-clear />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value1 = ref<string>('');
    const value2 = ref<string>(''); 
    return {
      value1,
      value2,
    };
  },
});
</script>
带字数提示的文本域

展示字数提示。

<template>
  <a-textarea v-model:value="value" showCount :maxlength="100" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<string>('test value');
    return {
      value,
    };
  },
});
</script>

API#

Input

参数 说明 类型 默认值 版本
addonAfter 带标签的 input，设置后置标签 string|slot
addonBefore 带标签的 input，设置前置标签 string|slot
defaultValue 输入框默认内容 string
disabled 是否禁用状态，默认为 false boolean false
id 输入框的 id string
maxlength 最大长度 number 1.5.0
prefix 带有前缀图标的 input string|slot
size 控件大小。注：标准表单内的输入框大小限制为 large。可选 large default small string default
suffix 带有后缀图标的 input string|slot
type 声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 Input.TextArea 代替 type="textarea")。 string text
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|object false
defaultValue 输入框默认内容 string
value(v-model) 输入框内容 string
allowClear 可以点击清除图标删除内容 boolean 1.5.0
showCount 是否展示字数 boolean false

Input.TextArea 事件

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

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

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

Input.Search 事件

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

其余属性和 Input 一致。

Input.Group

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

Input.Password (1.14.0 中新增)

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