Input 输入框

通过鼠标或键盘输入字符

基础文本框

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="基础文本框，请输入" />
  <span>{{test}}</span>
</template>

禁用文本框

通过 disabled 属性指定是否禁用 input 组件

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('some text')
</script>
<template>
  <Input v-model="test" disabled />
</template>

尺寸

使用 size 属性改变输入框大小。 除了默认大小外，还有另外两个选项： large, small。

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <div class="size-holder">
    <Input v-model="test" placeholder="大的 Input" size="large">
    </Input>
    <Input v-model="test" placeholder="普通的 Input">
    </Input>
    <Input v-model="test" placeholder="小的 Input" size="small">
    </Input>
  </div>
</template>
<style scoped>
.size-holder {
  display: flex;
  align-items: center;
}
</style>

复合型输入框

可以在输入框前置或后置一个元素，通常是标签或按钮。可以使用 prepend 和 append 插槽。 要在输入框中添加前后元素，可以使用 prefix 和 suffix 插槽。

Https://

.com

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
import Icon from '@/components/Icon/Icon.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="prepend append">
    <template #prepend>Https://</template>
    <template #append>.com</template>
  </Input>

  <Input v-model="test" placeholder="prefix suffix">
    <template #prefix>
      <Icon icon="fa-user" />
    </template>
    <template #suffix>
      <Icon icon="fa-user" />
    </template>
  </Input>
</template>

Textarea

用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="可以是一个 Textarea" type="textarea">
  </Input>
</template>

密码文本框

使用 show-password 属性即可得到一个可切换显示隐藏的密码框

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="密码文本框，可以切换" showPassword/>
</template>

清空文本框

使用 clearable 属性即可得到一个可一键清空的输入框

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" clearable placeholder="输入字符以后可以点击清空"/>
</template>

React 用法

import { useState } from 'react'
import { Input } from '@bobocn/element/react'
import '@bobocn/element/style.css'

// 基础用法
function App() {
  const [value, setValue] = useState('')

  return (
    <Input
      modelValue={value}
      onUpdate:modelValue={setValue}
      placeholder="请输入内容"
    />
  )
}

// 禁用状态
<Input modelValue="" disabled placeholder="禁用" />

// 可清空
<Input modelValue={value} onUpdate:modelValue={setValue} clearable />

// 密码框
<Input modelValue={value} onUpdate:modelValue={setValue} showPassword />

// Textarea
<Input type="textarea" modelValue={value} onUpdate:modelValue={setValue} />

// 复合型输入框（前后缀通过 prepend / append 传入 ReactNode）
<Input
  modelValue={value}
  onUpdate:modelValue={setValue}
  prepend={<span>http://</span>}
  append={<span>.com</span>}
/>

API

属性 (Attributes)

属性名	说明	类型	默认值
type	输入框类型	'text' | 'textarea' | 'password'	text
modelValue / v-model	绑定值	string	—
size	输入框尺寸	'large' | 'small'	—
disabled	是否禁用	boolean	false
clearable	是否可清空	boolean	false
show-password	是否显示切换密码图标	boolean	false
placeholder	占位文本	string	—
readonly	是否只读	boolean	false
autocomplete	原生 autocomplete 属性	string	off
autofocus	原生 autofocus 属性	boolean	false
form	原生 form 属性	string	—

事件 (Events)

事件名	说明	回调参数
update:modelValue	绑定值更新时触发	(value: string) => void
input	输入时触发	(value: string) => void
change	值改变且失焦时触发	(value: string) => void
focus	获取焦点时触发	(event: FocusEvent) => void
blur	失去焦点时触发	(event: FocusEvent) => void
clear	点击清空按钮时触发	() => void

插槽 (Slots)

插槽名	说明
prepend	输入框前置内容
prefix	输入框头部图标
suffix	输入框尾部图标
append	输入框后置内容

方法 (Exposes)

方法名	说明	类型
ref	原生 input / textarea 元素引用	Ref<HTMLInputElement | HTMLTextAreaElement>