更新记录

1.0.0(2025-02-18) 下载此版本

发布初版


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

Textarea 文本域

组件名: xt-textarea

适配情况需自行尝试,开发时只测试了H5、APP、微信小程序

安装方式

本组件符合 easycom 规范,HBuilderX 3.1.0 起,只需将本组件导入项目,在页面 template 中即可直接使用,无需在页面中 import 和注册 components

基本用法

<template>
    <view class="xt">
        <xt-textarea v-model="inputValue" placeholder="请输入" count :formatter="formatter"></xt-textarea>
        <button @click="log">打印</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                inputValue: ''
            }
        },
        methods: {
            log() {
                console.log(this.inputValue);
            },
            formatter(e) {
                console.log(e);
                return '测试'
            }
        }
    }
</script>

<style lang="scss">
    .xt {
        padding: 0 20rpx;
        display: flex;
        flex-direction: column;
        gap: 15rpx;
    }
</style>

API

属性 类型 说明
value String | Number 绑定的值
border String 输入框的边框样式。默认为 surround,可选 bottomnone
placeholder String | Number 输入框为空时占位符
placeholderClass String 指定 placeholder 的样式类,注意页面或组件的 style 中写了 scoped 时,需要在类名前写 /deep/(默认 textarea-placeholder
placeholderStyle String | Object 指定 placeholder 的样式,字符串/对象形式
height String | Number 输入框高度(默认 140rpx)
confirmType String 设置键盘右下角按钮的文字,仅微信小程序、App-vue 和 H5 有效(默认 done
disabled Boolean 是否禁用(默认 false)
count Boolean 是否显示统计字数(默认 false)
focus Boolean 是否自动获取焦点,nvue 不支持,H5 取决于浏览器的实现(默认 false)
autoHeight Boolean 是否自动增加高度(默认 false)
fixed Boolean 如果 textarea 在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true(默认 false)
cursorSpacing Number 指定光标与键盘的距离(默认 0)
cursor String | Number 指定 focus 时的光标位置
formatter Function 内容式化函数
showConfirmBar Boolean 是否显示键盘上方带有“完成”按钮那一栏(默认 true)
selectionStart Number 光标起始位置,自动聚焦时有效,需与 selection-end 搭配使用(默认 -1)
selectionEnd Number 光标结束位置,自动聚焦时有效,需与 selection-start 搭配使用(默认 -1)
adjustPosition Boolean 键盘弹起时,是否自动上推页面(默认 true)
disableDefaultPadding Boolean | Number 是否去掉 iOS 下的默认内边距,只微信小程序有效(默认 false)
holdKeyboard Boolean focus 时,点击页面的时候不收起键盘,只微信小程序有效(默认 false)
maxlength String | Number 最大输入长度,设置为 -1 的时候不限制最大长度(默认 140)
ignoreCompositionEvent Boolean 是否忽略组件内对文本合成系统事件的处理(默认 true)

各参数具体可选值,请查询uniapp官网

uniapp官网-textarea

格式化函数

onFormatter(e) {
  // 格式化逻辑
  e = '格式化内容'
  /****/
  // 最后返回即可
                return e
        }

Events

事件 类型 说明
focus Function 输入框聚焦时触发
blur Function 输入框失去焦点时触发
linechange Function 输入框行数变化时调用
input Function 键盘输入时,触发 input 事件
confirm Function 点击完成时,触发 confirm 事件
keyboardheightchange Function 键盘高度发生变化时触发此事件

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问