引入组件

局部引入

// parent.vue
const FInput = defineAsyncComponent(() => import('@/components/formaui/f-input/f-input.vue'))

基础用法

通过 v-model 双向绑定输入值

<f-input v-model="value" placeholder="请输入内容" />

import { ref } from 'vue'
const value = ref('')

带标题

label 属性：左侧标题文字

<f-input v-model="value" label="姓名" placeholder="请输入姓名" show-border-bottom />

必填项

isRequired 属性：显示红色星号（默认 false）

<f-input v-model="value" label="手机号" is-required placeholder="请输入手机号" show-border-bottom />

可清除

isClearable 属性：显示清除按钮（默认 false）

<f-input v-model="value" placeholder="输入后可清除" is-clearable show-border-bottom />

密码输入

password 属性：密码类型输入（默认 false）

<f-input v-model="value" label="密码" password placeholder="请输入密码" show-border-bottom />

插槽

名称	说明
left	左侧插槽
right	右侧插槽

属性

名称	类型	说明	默认值
v-model	string / number	输入值	''
label	string	左侧标题	''
labelFontSize	string	标题字体大小	32rpx
labelColor	string	标题颜色	#0B1D4A
labelWidth	string	标题最小宽度	140rpx
isRequired	boolean	是否必填项	false
requiredColor	string	必填星号颜色	colors.danger 主题
isClearable	boolean	是否显示清除按钮	false
clearSize	number	清除图标大小（px）	15
clearColor	string	清除图标颜色	#bfbfbf
isFocus	boolean	是否自动聚焦	false
placeholder	string	占位符	''
placeholderStyle	string	占位符样式	-
name	string	表单字段名	''
type	string	与官方 input type 一致	text
password	boolean	是否密码类型	false
disabled	boolean	是否禁用	false
maxlength	number / string	最大输入长度	140
min	number / string	最小值（number 类型）	NaN
max	number / string	最大值（number 类型）	NaN
fontSize	string	输入框字号	32rpx
textColor	string	输入框颜色	#0B1D4A
isInputBorder	boolean	是否显示 input 边框	false
borderColor	string	边框颜色	var(--f-border-color)
isFillet	boolean	是否胶囊圆角样式	false
showBorderTop	boolean	是否显示上边框	false
showBorderBottom	boolean	是否显示下边框	false
isLineLeft	boolean	下边框是否有左偏移	false
isTrim	boolean	是否自动去除首尾空格	true
isTextRight	boolean	文本是否右对齐	false
padding	string	容器内边距	26rpx 30rpx
bgColor	string	背景颜色	#FFFFFF
borderRadius	string	圆角	0
marginTop	string	上外边距	0rpx
cursorSpacing	number	光标与键盘的距离	0
confirmType	string	键盘右下角按钮文字类型	done
confirmHold	boolean	点击完成按钮时是否保持键盘不收起	false
cursor	number	光标位置	-1
selectionStart	number	选区起始位置	-1
selectionEnd	number	选区结束位置	-1
adjustPosition	boolean	键盘弹起时是否自动上推页面	true
holdKeyboard	boolean	收起键盘时是否保持 focus	false
autoBlur	boolean	focus 时点击页面是否自动 blur	false

事件

事件名	说明	回调参数
focus	输入框聚焦时	事件对象
blur	输入框失焦时	事件对象
confirm	点击键盘完成时	事件对象
click	点击容器区域时	{ name }
keyboardheightchange	键盘高度变化时	详情对象

方法

方法名	说明	传入参数
-	-	-