Input 输入框

此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件fu-form而设计的。

在 fu-form 中嵌套 fu-form-item，再嵌套 fu-input 去实现。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

• 通过 v-model 绑定输入框的值
• 通过 type 设置输入框的类型，默认为 text
• 通过 placeholder 设置输入框为空时的占位符
• 通过 border 设置是否显示输入框边框

<template>
    <fu-input v-model="value" :type="type" :placeholder="placeholder" :border="border"></fu-input>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    let value = ref('');
    const type = ref('text');
    const placeholder = ref('请输入内容');
    const border = ref(true);
</script>

设置输入框的类型

通过 type 属性可以设置输入框的类型：

• text 文本输入键盘
• password 密码输入键盘
• number 数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式
• idcard 身份证输入键盘，信、支付宝、百度、QQ小程序
• digit 带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序支持

以上参数跟各个平台的兼容性有关，详见uni-app文档：Input 组件

设置清空字符

通过 clearable 属性设置为 true 即可显示清空按钮，点击清空按钮会清空输入框内容。

<template>
    <fu-input placeholder="请输入内容" clearable></fu-input>
</template>

设置下划线

通过 border 属性为 bottom 即可显示下划线。

<template>
    <fu-input placeholder="请输入内容" border="bottom" clearable></fu-input>
</template>

限制输入长度

通过 maxlength 属性设置最大输入长度, 设置为 -1 则不限制输入长度。

注意

支付宝小程序中 type 属性设置为 digit 则 maxlength 属性设置 -1 ，在IOS中无法正常回调，所以需要设置maxlength为具体值，可根据 type 属性类型自行修改。

<template>
    <fu-input placeholder="请输入内容" maxlength="10"></fu-input>
</template>

前后图标

<template>
    <fu-input placeholder="前置图标" prefixIcon="magnifier"></fu-input>
    <fu-input placeholder="后置图标" suffixIcon="location-fill" margin="20rpx 0 0 0"></fu-input>
</template>

前后插槽

通过设置 slot 为 prefix 或 suffix 来自定义前后插槽。

<template>
    <fu-input placeholder="前置插槽" shape="circle">
        <template v-slot:prefix>
            <view class="fu-font-28 fu-m-r-10" style="color: #999999;">https://</view>
        </template>
    </fu-input>
    <fu-input placeholder="后置插槽" shape="circle" margin="20rpx 0 0 0">
        <template v-slot:suffix>
            <fu-code-verify ref="codeVerifyRef" @send="handleSend"></fu-code-verify>
        </template>
    </fu-input>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const codeVerifyRef = ref();

    // methods方法
    const handleSend = () => {
        setTimeout(() => {
            codeVerifyRef.value.startTimer()
        }, 500)
    };

API

Input Props

属性名	说明	类型	默认值	可选值
v-model	用于双向绑定输入框的值	-	-	-
type	输入框类型，详见上方设置输入框的类型	String	-	-
disabled	输入框为空时的占位符	Boolean	false	true
disabledColor	禁用状态时的背景色	String	#F5F7FA	-
readonly	是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会	Boolean	false	true
clearable	是否显示清空按钮	Boolean	false	true
password	是否显示密码输入键盘	Boolean	false	true
maxlength	最大输入长度	String｜Number	-1	-
placeholder	输入框为空时的占位符	String	-	-
placeholderClass	指定placeholder的样式类 注意页面或组件的style中写了scoped时，需要在类名:deep()包裹	String	-	-
placeholderStyle	指定placeholder的样式	String｜Object	-	-
confirmType	设置右下角按钮的文字，兼容性详见uni-app文档	String	done	-
confirmHold	点击键盘右下角按钮时是否保持键盘不收起，H5无效	Boolean	false	true
holdKeyboard	focus时，点击页面的时候不收起键盘，微信小程序有效	Boolean	false	true
focus	自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点	Boolean	false	true
autoBlur	键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效	Boolean	false	true
cursor	指定focus时光标的位置	String｜Number	-1	-
cursorSpacing	输入框聚焦时底部与键盘的距离	String｜Number	30	-
selectionStart	指定输入框光标起始位置	String｜Number	-1	-
selectionEnd	指定输入框光标结束位置	String｜Number	-1	-
adjustPosition	键盘弹起时，是否自动上推页面	Boolean	true	false
align	输入框内容对齐方式，可选值：left/center/right	String	left	-
size	输入框字体的大小	String｜Number	14	-
color	输入框字体颜色	String	#333333	-
prefixIcon	输入框前置图标	String	-	-
prefixSize	输入框前置图标大小	String｜Number	18	-
prefixColor	输入框前置图标颜色	String	#8f9ca2	-
suffixIcon	输入框后置图标	String	-	-
suffixSize	输入框后置图标大小	String｜Number	18	-
suffixColor	输入框后置图标颜色	String	#8f9ca2	-
border	边框类型，可选值： surround 四周边框 bottom 底部边框 none 无边框	String	surround	-
shape	输入框形状，可选值： circle 圆形 square 方形	String	square	-
margin	自定上下外间距	String	0	-
formatter	输入过滤或格式化函数(如需兼容微信小程序，则只能通过setFormatter方法)	Function	-	-
customStyle	定义需要用到的外部样式	String｜Object	-	-
ignoreCompositionEvent	是否忽略组件内对文本合成系统事件的处理。 为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件	Boolean	true	false

Input Events

事件名	说明	回调参数
click	readonly或disabled为true时 点击input时触发	() => void
input	输入内容变化时触发	(value: string) => void
change	输入框内容变化时触发	(value: string) => void
focus	输入框获得焦点时触发	(event: FocusEvent) => void
blur	输入框失去焦点时触发	(event: FocusEvent) => void
confirm	点击键盘右下角按钮时触发	(event: MouseEvent) => void
keyboardheightchange	软键盘高度变化时触发	(height: number) => void
clear	点击清空按钮时触发	() => void

Input Methods

方法名	说明
setFormatter	为兼容微信小程序而暴露的内部方法，详见上方说明

Input Slot

名称	说明
prefix	输入框前置内容
suffix	输入框后置内容