Input 输入框

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

代码演示

基础用法

vue

<template>
  <a-space direction="vertical">
    <a-input v-model:value="value" placeholder="Basic usage" />
    <a-input v-model:value.lazy="value1" autofocus placeholder="Lazy usage" />
  </a-space>
</template>
<script setup>
import { watch, ref } from 'vue';
const value = ref('');
const value1 = ref('');
watch(value, () => {
  console.log(value.value);
});
watch(value1, () => {
  console.log(value1.value);
});
</script>

适应文本高度的文本域

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

vue

<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 setup>
import { ref } from 'vue';
const value1 = ref('');
const value2 = ref('');
</script>

搜索框

带有搜索按钮的输入框。

vue

<template>
  <a-space direction="vertical">
    <a-input-search
      v-model:value="value4"
      placeholder="input search text"
      style="width: 200px"
      @search="onSearch"
    />
    <a-input-search
      v-model:value="value4"
      placeholder="input search text"
      enter-button
      @search="onSearch"
    />
    <a-input-search
      v-model:value="value4"
      placeholder="input search text"
      enter-button="Search"
      size="large"
      @search="onSearch"
    />
    <a-input-search
      v-model:value="value4"
      placeholder="input search text"
      size="large"
      @search="onSearch"
    >
      <template #enterButton>
        <a-button>Custom</a-button>
      </template>
    </a-input-search>
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
const onSearch = searchValue => {
  console.log('use value', searchValue);
  console.log('or use this.value', value.value);
};
</script>

搜索框 loading

用于 onSearch 的时候展示 loading。

vue

<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 setup>
import { ref } from 'vue';
const value = ref('');
</script>

输入框组合

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

Zhejiang

Option1

Option1-1

Option2-2

Between

Home

Select Address

vue

<template>
  <a-space class="site-input-group-wrapper" direction="vertical" size="middle">
    <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>
    <a-input-group compact>
      <a-input v-model:value="value1" style="width: 20%" />
      <a-input v-model:value="value2" style="width: 30%" />
    </a-input-group>
    <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 v-model:value="value4" style="width: 50%" />
    </a-input-group>
    <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 v-model:value="value6" style="width: 50%" />
    </a-input-group>
    <a-input-group compact>
      <a-input v-model:value="value7" style="width: 50%" />
      <a-date-picker v-model:value="value8" style="width: 50%" />
    </a-input-group>
    <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>
    <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"
        class="site-input-split"
        style="width: 30px; border-left: 0; pointer-events: none"
        placeholder="~"
        disabled
      />
      <a-input
        v-model:value="value14"
        class="site-input-right"
        style="width: 100px; text-align: center"
        placeholder="Maximum"
      />
    </a-input-group>
    <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"
        :options="[{ value: 'text 1' }, { value: 'text 2' }]"
        style="width: 200px"
        placeholder="Email"
      />
    </a-input-group>
    <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>
    <a-input-group compact>
      <a-input v-model:value="value19" style="width: calc(100% - 200px)" />
      <a-button type="primary">Submit</a-button>
    </a-input-group>
    <a-input-group compact>
      <a-input v-model:value="value20" style="width: calc(100% - 200px)" />
      <a-tooltip title="copy git url">
        <a-button>
          <template #icon><CopyOutlined /></template>
        </a-button>
      </a-tooltip>
    </a-input-group>
  </a-space>
</template>
<script setup>
import { ref } 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',
          },
        ],
      },
    ],
  },
];
const value1 = ref('0571');
const value2 = ref('26888888');
const value3 = ref('Zhejiang');
const value4 = ref('Xihu District, Hangzhou');
const value5 = ref('Option1');
const value6 = ref('input content');
const value7 = ref('input content');
const value8 = ref(null);
const value9 = ref('Option1-1');
const value10 = ref('Option2-2');
const value11 = ref('1');
const value12 = ref('');
const value13 = ref('');
const value14 = ref('');
const value15 = ref('Sign Up');
const value16 = ref('');
const value17 = ref('Home');
const value18 = ref([]);
const value19 = ref('https://surely.cool');
const value20 = ref('https://antdv.com');
</script>
<style scoped>
.site-input-group-wrapper .site-input-split {
  background-color: #fff;
}

.site-input-group-wrapper .site-input-right {
  border-left-width: 0;
}

.site-input-group-wrapper .site-input-right:hover,
.site-input-group-wrapper .site-input-right:focus {
  border-left-width: 1px;
}

.site-input-group-wrapper .ant-input-rtl.site-input-right {
  border-right-width: 0;
}

.site-input-group-wrapper .ant-input-rtl.site-input-right:hover,
.site-input-group-wrapper .ant-input-rtl.site-input-right:focus {
  border-right-width: 1px;
}
[data-theme='dark'] .site-input-group-wrapper .site-input-split {
  background-color: transparent;
}
</style>

前置/后置标签

用于配置一些固定组合。

Http://.com

Http://

.com

cascader

vue

<template>
  <a-space direction="vertical">
    <a-input v-model:value="value1" addon-before="Http://" addon-after=".com" />
    <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>
    <a-input v-model:value="value5">
      <template #addonAfter>
        <setting-outlined />
      </template>
    </a-input>

    <a-input v-model:value="value6">
      <template #addonBefore>
        <a-cascader placeholder="cascader" style="width: 150px" />
      </template>
    </a-input>
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref('mysite');
const value2 = ref('mysite');
const value3 = ref('Http://');
const value4 = ref('.com');
const value5 = ref('mysite');
const value6 = ref('mysite');
</script>

密码框

vue

<template>
  <a-space direction="vertical" size="middle" style="width: 100%">
    <a-input-password v-model:value="value" placeholder="input password" />
    <a-input-password v-model:value="value2" placeholder="input password">
      <template #iconRender="v">
        <EyeTwoTone v-if="v"></EyeTwoTone>
        <EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
      </template>
    </a-input-password>
    <a-input-password
      v-model:value="value3"
      placeholder="input password"
      :visibility-toggle="false"
    />
    <a-space>
      <a-input-password
        v-model:value="value4"
        v-model:visible="visible"
        placeholder="input password"
      />
      <a-button @click="visible = !visible">{{ visible ? 'Hide' : 'Show' }}</a-button>
    </a-space>
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');
const visible = ref(true);
</script>

API

Input

参数	说明	类型	默认值
addonAfter	带标签的 input，设置后置标签	string \| slot
addonBefore	带标签的 input，设置前置标签	string \| slot
allowClear	可以点击清除图标删除内容	boolean
bordered	是否有边框	boolean	true
clearIcon	自定义清除图标（allowClear 为 true 时生效）	slot
defaultValue	输入框默认内容	string
disabled	是否禁用状态，默认为 false	boolean	false
id	输入框的 id	string
maxlength	最大长度	number
prefix	带有前缀图标的 input	string \| slot
showCount	是否展示字数	boolean	false
status	设置校验状态	'error' \| 'warning'	-
size	控件大小。注：标准表单内的输入框大小限制为 `middle`。可选 `large` `middle` `small`	string	-
suffix	带有后缀图标的 input	string \| slot
type	声明 input 类型，同原生 input 标签的 type 属性	string	text
value(v-model)	输入框内容	string

Input 事件

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

TIP

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

TextArea

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

TextArea 事件

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

Textarea 的其他属性和浏览器自带的 textarea 一致。

Input.Search

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

Input.Search 事件

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

其余属性和 Input 一致。

Input.Group

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

html

<a-input-group>
  <a-input />
  <a-input />
</a-input-group>

Input.Password

参数	说明	类型	默认值
visible(v-model)	密码是否可见	boolean	false
iconRender	自定义切换按钮	slot	-
visibilityToggle	是否显示切换按钮或者控制密码显隐	boolean	true

Input 输入框 ​

代码演示 ​

基础用法 ​

适应文本高度的文本域 ​

搜索框 ​

搜索框 loading ​

输入框组合 ​

前置/后置标签 ​

密码框 ​

API ​

Input ​

Input 事件 ​

TextArea ​

TextArea 事件 ​

Input.Search ​

Input.Search 事件 ​

Input.Group ​

Input.Password ​