vue 输入框maxlength不影响拼音输入

直接设置 input 的 maxlength 会导致最后几个字无法用拼音输入，比如最大长度还剩两个字，我想输入'项目'，当我拼音输入'xi'之后，后面的'angmu'是打不出的。

可以不设置 maxlength，而是用 this.$nextTick(() => {}) 在用户输入完之后，裁剪文字

<template>
  <view class="input-view">
    <u-input v-model="value" type="textarea" :border="false" :clearable="false" :maxlength="9999"
      @input="handleInput" />
    <view class="tip-view">{{ tipText }}</view>
  </view>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    },
    maxlength: {
      type: [String, Number],
      default: 5
    }
  },
  data () {
    return {
      value: '',
    };
  },
  computed: {
    tipText () {
      return `${this.value.length || 0}/${this.maxlength}`;
    }
  },
  watch: {
    text: {
      handler (val) {
        this.value = val
      },
      immediate: true
    }
  },
  methods: {
    handleInput (event) {
      // 直接给input设maxlength输入拼音的时候有影响
      if (event.length > Number(this.maxlength)) {
        this.$nextTick(() => {
          this.value = event.substring(0, this.maxlength);
          this.$emit('update:text', this.value)
        });
      } else {
        this.$emit('update:text', event)
      }
    }
  }
};
</script>
<style scoped lang="scss">
.input-view {
  .tip-view {
    margin-top: 20rpx;
    text-align: right;
  }
}
</style>

 

使用的时候

<template>
  <view class="input-view">
    <LYFInput :text.sync="text" />
  </view>
</template>

<script>
export default {
  components: {
    LYFInput
  },
  data () {
    return {
      text: 'abc',
    };
  }
}
</script>