Textarea 文本域

此组件满足了可能出现的表单信息补充，编辑等实际逻辑的功能，内置了字数校验等。

平台差异说明

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

代码示例

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

基础用法

<template>
    <fu-textarea v-model="value" placeholder="请输入内容"></fu-textarea>
</template>

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

    // data数据
    let value = ref('');
</script>

设置字数统计

通过 count 属性开启字数统计功能。

<template>
    <fu-textarea v-model="value" placeholder="请输入内容" count></fu-textarea>
</template>

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

    // data数据
    let value = ref('字数统计');
</script>

设置自动增高

通过 autoHeight 属性开启自动增高功能。

<template>
    <fu-textarea v-model="value" placeholder="请输入内容" autoHeight></fu-textarea>
</template>

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

    // data数据
    let value = ref('');
</script>

设置禁用状态

通过 disabled 属性设置禁用状态, 您也可以动态设置是否禁用。

<template>
    <fu-textarea v-model="value" placeholder="文本域已被禁用" disabled></fu-textarea>
</template>

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

    // data数据
    let value = ref('');
</script>

设置下划线模式

通过 border="bottom" 属性单独设置底部下划线

<template>
    <fu-textarea v-model="value" placeholder="请输入内容" border="bottom"></fu-textarea>
</template>

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

    // data数据
    let value = ref('');
</script>

格式化处理

如果有需要，可以通过 formatter 属性编写自定义格式化规则。

<template>
    <fu-textarea ref="textareaRef" v-model="value" placeholder="请输入内容" :formatter="formatter"></fu-textarea>
</template>

<script setup>
    import { ref } from 'vue';
    import { onReady } from '@dcloudio/uni-app';

    // data数据
    const textareaRef = ref();
    let value = ref('');

    // 生命周期
    onReady(() => {
        // 如果需要兼容微信小程序，需要调用此方法
        textareaRef.value.setFormatter(formatter);
    });

    // 自定义格式化函数
    function formatter(value) {
        // 让输入框只能输入数值，过滤其他字符
        return value.replace(/[^\d]/g, '');
    };
</script>

API

Textarea Props

属性名	说明	类型	默认值	可选值
value	输入框的内容	String｜Number	-	-
placeholder	输入框为空时占位符	String｜Number	-	-
placeholderClass	输入框为空时占位符的样式类	String	-	-
placeholderStyle	输入框为空时占位符的样式	String｜Object	-	-
height	输入框高度	String｜Number	70	-
confirmType	设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效	String	done	-
disabled	是否禁用输入框	Boolean	false	true
count	是否开启字数统计	Boolean	false	true
focus	是否聚焦输入框	Boolean	false	true
autoHeight	是否自动增高输入框	Boolean	false	true
fixed	如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true	Boolean	false	true
cursorSpacing	指定光标与键盘的距离	Number	0	-
cursor	指定focus时的光标位置	String｜Number	-	-
showConfirmBar	是否显示键盘上方带有”完成“按钮那一栏	Boolean	true	false
selectionStart	光标起始位置，自动聚焦时有效，需与selection-end搭配使用	Number	-1	-
selectionEnd	光标结束位置，自动聚焦时有效，需与selection-start搭配使用	Number	-1	-
adjustPosition	键盘弹起时，是否自动上推页面	Boolean	true	false
disableDefaultPadding	是否去掉 iOS 下的默认内边距，只微信小程序有效	Boolean	false	true
holdKeyboard	点击键盘时是否保持键盘不收起, 只微信小程序有效	Boolean	false	true
maxlength	最大输入长度，设置为 -1 的时候不限制最大长度	String｜Number	140	-
border	边框类型，surround-四周边框，bottom-底部边框	String	surround	bottom
borderColor	边框颜色	String	#dadbde	-
size	自定义文字大小	String｜Number	14	-
formatter	用于处理或者过滤输入框内容的方法	Function	null	-
customStyle	定义需要用到的外部样式	String｜Object	-	-

Textarea Methods

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

Textarea Events

事件名	说明	回调参数
focus	输入框聚焦时触发	() => void
blur	输入框失去焦点时触发	() => void
input	输入内容时触发	() => void
confirm	点击完成按钮时触发	() => void
linechange	输入框行数变化时触发	() => void
change	输入框内容变化时触发	() => void
keyboardheightchange	键盘高度变化时触发	() => void