Input 输入框

大约 3 分钟

Input 输入框

何时使用

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

代码演示

基本用法
基本用法。

<template>
  <div class="fs-input-docx-box">
    <f-input style="width: 200px" placeholder="请输入" />
    <f-input style="width: 200px" allow-clear placeholder="请输入" />
    <br />
    <f-input style="width: 200px" size="small" placeholder="请输入" />
    <f-input style="width: 200px" size="small" allow-clear placeholder="请输入" />
    <br />
    <f-input style="width: 200px" size="large" placeholder="请输入" />
    <f-input style="width: 200px" size="large" allow-clear placeholder="请输入" />
    <br />
    <f-input style="width: 200px" value="哈哈哈hahah123" disabled allow-clear placeholder="请输入" />
    <f-input style="width: 200px" value="哈哈哈hahah123" disabled size="small" placeholder="请输入" />
    <f-input style="width: 200px" value="哈哈哈hahah123" disabled size="large" placeholder="请输入" />
    <br />
    <f-input press-Line="输入框组件" style="width: 200px" allow-clear placeholder="请输入" />
    <f-input press-line="输入框组件" style="width: 200px" size="small" placeholder="请输入" />
    <f-input press-line="输入框组件" style="width: 200px" size="large" placeholder="请输入" />
    <br />

    <f-input style="width: 200px" placeholder="请输入">
      <template #prefix>
        <user-outlined />
      </template>
      <template #suffix>
        <info-circle-outlined />
      </template>
    </f-input>
    <f-input size="small" style="width: 200px" placeholder="请输入">
      <template #prefix>
        <user-outlined />
      </template>
      <template #suffix>
        <info-circle-outlined />
      </template>
    </f-input>
    <f-input size="large" style="width: 200px" placeholder="请输入">
      <template #prefix>
        <user-outlined />
      </template>
      <template #suffix>
        <info-circle-outlined />
      </template>
    </f-input>
    <br />
    <f-input style="width: 200px" prefix="￥" suffix="RMB" placeholder="请输入" />
    <f-input size="small" style="width: 200px" prefix="￥" suffix="RMB" placeholder="请输入" />
    <f-input size="large" style="width: 200px" prefix="￥" suffix="RMB" placeholder="请输入" />
    <br />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { UserOutlined, InfoCircleOutlined } from '@ant-design/icons-vue'
export default defineComponent({
  components: {
    UserOutlined,
    InfoCircleOutlined,
  },
  setup() {
    const value = ref<string>('')
    return {
      value,
    }
  },
})
</script>
<style>
.fs-input-docx-box > * {
  margin-right: 20px !important;
  margin-bottom: 20px;
}
</style>

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

数字输入框
数字输入框基本用法.

搜索框
带有搜索按钮的输入框。

<template>
  <div class="fs-input-docx-box">
    <f-input-search v-model:value="value" placeholder="请输入" style="width: 200px" @search="onSearch"></f-input-search>
    <f-input-search
      v-model:value="value"
      placeholder="请输入"
      style="width: 200px"
      @search="onSearch"
      loading
    ></f-input-search>
    <f-input-search
      v-model:value="value"
      placeholder="请输入"
      style="width: 200px"
      @search="onSearch"
      pressLine="输入框组件"
    >
      <template #prefix>
        <user-outlined />
      </template>
      <template #suffix> <info-circle-outlined /> </template
    ></f-input-search>
    <f-input-search v-model:value="value" placeholder="请输入" size="small" style="width: 200px" @search="onSearch" />
    <f-input-search v-model:value="value" placeholder="请输入" size="large" style="width: 200px" @search="onSearch" />
    <br />
    <f-input-search v-model:value="value" placeholder="请输入" enter-button style="width: 200px" @search="onSearch" />
    <f-input-search
      v-model:value="value"
      placeholder="请输入"
      enter-button
      style="width: 200px"
      @search="onSearch"
      loading
    />
    <f-input-search
      v-model:value="value"
      placeholder="请输入"
      enter-button="Search"
      @search="onSearch"
      style="width: 200px"
    />


    <f-input style="width: 200px" pressLine="搜索" allow-clear placeholder="请输入" type="search-clear" @search="onSearch" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
// import { UserOutlined, InfoCircleOutlined } from '@ant-design/icons-vue'
export default defineComponent({
  // components: {
  //   UserOutlined,
  //   InfoCircleOutlined,
  // },
  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>

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

<template>
  <div>
    <f-input-group size="small" compact>
      <f-input style="width: 120px" placeholder="请输入" />
      <f-input style="width: 240px" placeholder="请输入" />
    </f-input-group>
    <br />
    <f-input-group size="large" compact>
      <f-input style="width: 120px" placeholder="请输入" />
      <f-input style="width: 240px" placeholder="请输入" />
    </f-input-group>
    <br />
    <f-input-group compact>
      <f-input style="width: 120px" placeholder="请输入" />
      <f-input style="width: 240px" placeholder="请输入" />
    </f-input-group>
    <br />
    <f-input-group compact>
      <f-select style="width: 120px" placeholder="请选择">
        <f-select-option value="Zhejiang">Zhejiang</f-select-option>
        <f-select-option value="Jiangsu">Jiangsu</f-select-option>
      </f-select>
      <f-input style="width: 240px" placeholder="请输入" />
    </f-input-group>
    <br />
    <br />
    <f-input-group compact>
      <f-input style="width: 120px" placeholder="请输入" />
      <f-date-picker style="width: 240px" />
    </f-input-group>
    <br />
    <f-input-group compact>
      <f-select style="width: 120px" placeholder="请选择">
        <f-select-option value="Option1-1">Option1-1</f-select-option>
        <f-select-option value="Option1-2">Option1-2</f-select-option>
      </f-select>
      <f-select style="width: 240px" placeholder="请选择">
        <f-select-option value="Option2-1">Option2-1</f-select-option>
        <f-select-option value="Option2-2">Option2-2</f-select-option>
      </f-select>
    </f-input-group>
    <br />
    <f-input-group compact>
      <f-input style="width: calc(100% - 200px)" />
      <f-button type="primary">Submit</f-button>
    </f-input-group>
    <br />
    <f-input-group compact>
      <f-input style="width: calc(100% - 200px)" />
      <f-tooltip title="copy git url">
        <f-button>
          <template #icon><CopyOutlined /></template>
        </f-button>
      </f-tooltip>
    </f-input-group>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { CopyOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  components: {
    CopyOutlined,
  },
  setup() {},
})
</script>

密码框
密码框

API

Input

参数	说明	类型	默认值	版本
`pressLine` `新增`	组件右上角文本	string
`type` `新增`	扩展Input交互类型	default\|search-clear	default
addonAfter	带标签的 input，设置后置标签	string\|slot
addonBefore	带标签的 input，设置前置标签	string\|slot
allowClear	可以点击清除图标删除内容	boolean
bordered	是否有边框	boolean	true	3.0
defaultValue	输入框默认内容	string
disabled	是否禁用状态，默认为 false	boolean	false
id	输入框的 id	string
maxlength	最大长度	number		1.5.0
prefix	带有前缀图标的 input	string\|slot
showCount	是否展示字数	boolean	false	3.0
size	控件大小。注：标准表单内的输入框大小限制为 `large`。可选 `large` `default` `small`	string	`default`
suffix	带有后缀图标的 input	string\|slot
type	声明 input 类型，同原生 input 标签的 type 属性，见：MDNopen in new window(请直接使用 `<a-textarea />` 代替 `type="textarea"`)。	string	`text`
value(v-model)	输入框内容	string

Input 事件

事件名称	说明	回调参数
change	输入框内容变化时的回调	function(e)
pressEnter	按下回车的回调	function(e)
`clear` `新增`	设置allowClear属性后点击清楚按钮触发事件	function(e)

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

TextArea

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

TextArea 事件

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

Textarea 的其他属性和浏览器自带的 textareaopen in new window 一致。

InputNumber

成员	说明	类型	默认值	版本
press-line	输入框右上角文本	string
addonAfter	带标签的 input，设置后置标签	slot	-	3.0
addonBefore	带标签的 input，设置前置标签	slot	-	3.0
autofocus	自动获取焦点	boolean	false
bordered	是否有边框	boolean	true	3.0
controls	是否显示增减按钮	boolean	true	3.0
decimalSeparator	小数点	string	-
defaultValue	初始值	number
disabled	禁用	boolean	false
formatter	指定输入框展示值的格式	function(value: number \| string, info: { userTyping: boolean, input: string }): string	-	info: 3.0
keyboard	是否启用键盘快捷行为	boolean	true	3.0
max	最大值	number	Infinity
min	最小值	number	-Infinity
parser	指定从 formatter 里转换回数字的方式，和 formatter 搭配使用	function( string): number	-
precision	数值精度	number	-
prefix	带有前缀图标的 input	slot	-	3.0
size	输入框大小	string	无
step	每次改变步数，可以为小数	number\|string	1
stringMode	字符值模式，开启后支持高精度小数。同时 `change` 事件将返回 string 类型	boolean	false	3.0
value(v-model)	当前值	number

InputNumber事件

事件名称	说明	回调参数	版本
change	变化回调	Function(value: number \| string)
pressEnter	按下回车的回调	function(e)
step	点击上下箭头的回调	(value: number, info: { offset: number, type: 'up' \| 'down' }) => void	3.0

InputNumber方法

名称	描述
blur()	移除焦点
focus()	获取焦点

Input 输入框

# Input 输入框

# 何时使用

# 代码演示

# API

# Input

# Input 事件

# TextArea

# TextArea 事件

# InputNumber

# InputNumber事件

# InputNumber方法

Input 输入框

何时使用

代码演示

API

Input

Input 事件

TextArea

TextArea 事件

InputNumber

InputNumber事件

InputNumber方法