uniapp中组件库的Textarea 文本域的丰富使用方法

简介: uniapp中组件库的Textarea 文本域的丰富使用方法



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

注意:

由于在nvue下,u-textarea名称被uni-app官方占用,在nvue页面中请使用u--textarea名称,在vue页面中使用u--textarea或者u-textarea均可。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<script>
  export default {
    data() {
      return {
        value1: '',
      }
    },
  }
</script>

#字数统计

设置count属性实现字数统计

<u--textarea v-model="value2" placeholder="请输入内容" count ></u--textarea>
<script>
  export default {
    data() {
      return {
        value2: '统计字数',
      }
    },
  }
</script>

#自动增高

设置autoHeight属性实现自动增高

<u--textarea v-model="value3" placeholder="请输入内容" autoHeight ></u--textarea>
<script>
  export default {
    data() {
      return {
        value3: '',
      }
    },
  }
</script>

#禁用状态

设置disabled属性实现进行禁用,您也可以动态设置是否禁用

<u--textarea v-model="value4" placeholder="文本域已被禁用" disabled count></u--textarea>
<script>
  export default {
    data() {
      return {
        value4: '',
      }
    },
  }
</script>

#下划线模式

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

<u--textarea v-model="value5" placeholder="请输入内容" border="bottom"></u--textarea>
<script>
  export default {
    data() {
      return {
        value5: '',
      }
    },
  }
</script>

#格式化处理

如有需要,可以通过formatter参数编写自定义格式化规则。

注意:

微信小程序不支持通过props传递函数参数,所以组件内部暴露了一个setFormatter方法用于设置格式化方法,注意在页面的onReady生命周期获取ref再操作。

<template>
    <u-textarea v-model="value" :formatter="formatter" ref="textarea"></u-textarea>
</template>
<script>
    export default {
        data() {
            return {
                value: ''
            }
        },
    onReady() {
      // 如果需要兼容微信小程序的话,需要用此写法
      this.$refs.textarea.setFormatter(this.formatter)
    },
        methods: {
            formatter(value) {
        // 让输入框只能输入数值,过滤其他字符
              return value.replace(/[^0-9]/ig, "")
            }
        },
    }
</script>

API

#List Props

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

#Methods

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

#List Events

事件名 说明 回调参数
focus 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度 e
blur 输入框失去焦点时触发,event.detail = {value, cursor} e
linechange 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0} e
input 当键盘输入时,触发 input 事件 e.detail.value
confirm 点击完成时, 触发 confirm 事件 e
keyboardheightchange 键盘高度发生变化的时候触发此事件 e
目录
打赏
0
0
0
0
22
分享
相关文章
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
69 0
在线课堂+工具组件小程序uniapp移动端源码
|
4月前
|
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
197 10
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
173 5
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
189 2
uniapp APP自动更新组件
uniapp APP自动更新组件
131 1
|
4月前
Uniapp矩阵评分组件
Uniapp矩阵评分组件
69 2
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
88 0
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
74 0
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
171 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等