问题记录

2025.2.13

问题： unapp 使用uview组件库的u-textarea组件设置最大值maxlength，移动端复制时容易出现超出最大字数的现象（pc端调试不会出现）

解决：该组件初始化时传入格式方法限制最大字数

<u-textarea v-model="form.content" maxlength="140" count placeholder="请输入店铺简介" ref="textarea"></u-textarea>

 onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.textarea.setFormatter((value) => {
      if (value.length >= 140) {
        return value.substr(0, 140)
      } else {
        return value
      }
    })
  },

原因：u-textarea组件设置的最大字数是限制用户输入的字数，剪切板的复制不会触发输入的监听方法

源码：

<text
    class="u-textarea__count"
    :style="{
        'background-color': disabled ? 'transparent' : '#fff',
    }"
    v-if="count"
>
    {{ innerValue.length }}/{{ maxlength }}
</text>

onInput(e) {
    let { value = "" } = e.detail || {};
    // 格式化过滤方法
    const formatter = this.formatter || this.innerFormatter
    const formatValue = formatter(value)
    // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
    this.innerValue = value
    this.$nextTick(() => {
        this.innerValue = formatValue;
        this.valueChange();
    })
},