Input 文字输入

通过鼠标或键盘输入字符

基础用法

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

禁用状态

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

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

复合型输入框

可以在输入框中前置或后置一个元素，通常是标签或按钮。

可通过 slot 来指定在 Input 中分发的前置或者后置的内容。

https://

.com

<script setup>
import { ref } from 'vue'
import PfInput from '@/components/lib/Input/src/Input.vue'
import PfIcon from '@/components/lib/Icon/src/Icon.vue'
const text = ref('')
</script>
<template>
  <pf-input v-model="text" placeholder="基础文本框，请输入">
    <template #prepend>https://</template>
    <template #append>.com</template>
  </pf-input>
  <br />
  <br />
  <pf-input v-model="text" placeholder="基础文本框，请输入">
    <template #prefix>
      <pf-icon icon="fa-user" />
    </template>
    <template #suffix>
      <pf-icon icon="fa-user" />
    </template>
  </pf-input>
  <span>{{ text }}</span>
</template>

密码框

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

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

一键清空

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

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

文本域

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

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

Input 属性

Name	Description	Type	Default
type	input 原生类型	'string'	text
model-value / v-model	绑定值	'string'
disabled	是否禁用	boolean	false
placeholder	输入框占位文本	string
size	输入框尺寸，只在 type 不为 'textarea' 时有效	'large' | 'small'
placeholder	输入框占位文本	string
show-password	是否显示切换密码图标	boolean	false
clearable	是否显示清除按钮	boolean	false
readonly	原生 readonly 属性，是否只读	boolean	false
autofocus	原生属性，自动获取焦点	boolean	false
autocomplete	原生 autocomplete 属性	string	off

Input 事件

Name	Description	Type
blur	当选择器的输入框失去焦点时触发	(e: FocusEvent) => void
focus	当选择器的输入框获得焦点时触发	(e: FocusEvent) => void
change	当选择器的输入框失去焦点时触发	(e: string) => void
input	当选择器的输入框获得焦点时触发	(e: string) => void
clear	在点击由 clearable 属性生成的清空按钮时触发	()=>void

Input 插槽

Name	Description
prefix	输入框头部内容
suffix	输入框尾部内容
prepend	输入框前置内容
append	输入框后置内容

Input 公共方法

Name	Description	Type
ref	HTML元素 input 或 textarea	Ref<HTMLInputElement | HTMLTextAreaElement>