Input 输入框

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

何时使用

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

代码演示

基本使用

基本使用。

<template>
  <a-input placeholder="Basic usage"/>
</template>

适应文本高度的文本域

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

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

前缀和后缀

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

<template>
  <div class="components-input-demo-presuffix">
    <a-input placeholder="Basic usage" v-model="userName" ref="userNameInput">
      <a-icon slot="prefix" type="user" />
      <a-icon v-if="userName" slot="suffix" type="close-circle" @click="emitEmpty" />
    </a-input>
  </div>
</template>
<script>
export default {
  data () {
    return {
      userName: '',
    }
  },
  methods: {
    emitEmpty () {
      this.$refs.userNameInput.focus()
      this.userName = ''
    },
  },
}
</script>
<style scoped>
.components-input-demo-presuffix .anticon-close-circle {
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
  font-size: 12px;
}
.components-input-demo-presuffix .anticon-close-circle:hover {
  color: #999;
}
.components-input-demo-presuffix .anticon-close-circle:active {
  color: #666;
}
</style>

搜索框

带有搜索按钮的输入框。

<template>
  <div>
    <a-input-search
      placeholder="input search text"
      style="width: 200px"
      @search="onSearch"
    />
    <br /><br />
    <a-input-search
      placeholder="input search text"
      @search="onSearch"
      enterButton
    />
    <br /><br />
    <a-input-search placeholder="input search text" @search="onSearch" enterButton="Search" size="large" />
    <br /><br />
    <a-input-search placeholder="input search text" @search="onSearch" size="large">
      <a-button slot="enterButton">Custom</a-button>
    </a-input-search>
  </div>
</template>
<script>
export default {
  methods: {
    onSearch (value) {
      console.log(value)
    },
  },
}
</script>

三种大小

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

<template>
  <div class="components-input-demo-size">
    <a-input size="large" placeholder="large size" />
    <a-input placeholder="default size" />
    <a-input size="small" placeholder="small size" />
  </div>
</template>
<style scoped>
.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}
</style>

输入框组合

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

<template>
<div>
  <a-input-group size="large">
    <a-col :span="5">
      <a-input defaultValue="0571" />
    </a-col>
    <a-col :span="8">
      <a-input defaultValue="26888888" />
    </a-col>
  </a-input-group>
  <br />
  <a-input-group compact>
    <a-input style="width: 20%" defaultValue="0571" />
    <a-input style="width: 30%" defaultValue="26888888" />
  </a-input-group>
  <br />
  <a-input-group compact>
    <a-select defaultValue="Zhejiang">
      <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%" defaultValue="Xihu District, Hangzhou" />
  </a-input-group>
  <br />
  <a-input-group compact>
    <a-select defaultValue="Option1">
      <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%" defaultValue="input content" />
  </a-input-group>
  <br />
  <a-input-group compact>
    <a-input style="width: 50%" defaultValue="input content" />
    <a-date-picker />
  </a-input-group>
  <br />
  <a-input-group compact>
    <a-select defaultValue="Option1-1">
      <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 defaultValue="Option2-2">
      <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 defaultValue="1">
      <a-select-option value="1">Between</a-select-option>
      <a-select-option value="2">Except</a-select-option>
    </a-select>
    <a-input style=" width: 100px; text-align: center" placeholder="Minimum" />
    <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="~" disabled />
    <a-input style="width: 100px; text-align: center; border-left: 0" placeholder="Maximum" />
  </a-input-group>
  <br />
  <a-input-group compact>
    <a-select defaultValue="Sign Up">
      <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
      :dataSource="dataSource"
      style="width: 200px"
      @change="handleChange"
      placeholder="Email"
    />
  </a-input-group>
  <br />
  <a-input-group compact>
    <a-select style="width: 30%" defaultValue="Home">
      <a-select-option value="Home">Home</a-select-option>
      <a-select-option value="Company">Company</a-select-option>
    </a-select>
    <a-cascader style="width: 70%" :options="options" placeholder="Select Address" />
  </a-input-group>
</div>
</template>
<script>
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 {
  data() {
    return {
      options,
      dataSource: [],
    }
  },
  methods: {
    handleChange(value) {
      this.dataSource = !value || value.indexOf('@') >= 0 ? [] : [
        `${value}@gmail.com`,
        `${value}@163.com`,
        `${value}@qq.com`,
      ];
    }
  }
}
</script>

文本域

用于多行输入。

<template>
  <a-textarea placeholder="Basic usage" :rows="4"/>
</template>

前置/后置标签

用于配置一些固定组合。

<template>
  <div>
    <div style="margin-bottom: 16px">
      <a-input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
    </div>
    <div style="margin-bottom: 16px">
      <a-input defaultValue="mysite">
        <a-select slot="addonBefore" defaultValue="Http://" style="width: 90px">
          <a-select-option value="Http://">Http://</a-select-option>
          <a-select-option value="Https://">Https://</a-select-option>
        </a-select>
        <a-select slot="addonAfter" defaultValue=".com" 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>
      </a-input>
    </div>
    <div style="margin-bottom: 16px">
      <a-input defaultValue="mysite">
        <a-icon slot="addonAfter" type="setting"/>
      </a-input>
    </div>
  </div>
</template>

输入时格式化展示

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

<template>
  <a-tooltip
    :trigger="['focus']"
    placement="topLeft"
    overlayClassName="numeric-input"
  >
    <span slot="title" v-if="value" class="numeric-input-title">
      {{value !== '-' ? formatNumber(value) : '-'}}
    </span>
    <template slot="title" v-else>
      Input a number
    </template>
    <a-input
      :value="value"
      @change="onChange"
      @blur="onBlur"
      placeholder="Input a number"
      maxLength="25"
      style="width: 120px"
    />
  </a-tooltip>
</template>
<script>
function formatNumber (value) {
  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 {
  data () {
    return {
      value: '',
    }
  },
  methods: {
    formatNumber,
    onChange (e) {
      const { value } = e.target
      const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/
      if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
        this.value = value
      }
    },
    // '.' at the end or only '-' in the input box.
    onBlur () {
      const { value, onChange } = this
      if (value.charAt(value.length - 1) === '.' || value === '-') {
        onChange({ value: value.slice(0, -1) })
      }
    },
  },
}
</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>

API

Input

Input 事件

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

Input.TextArea

Input.TextArea事件

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

Input.Search

Input.Search 事件

其余属性和 Input 一致。

Input.Group

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