HarmonyOS鸿蒙Next中如何限制快应用input组件的输入值个数

HarmonyOS鸿蒙Next中如何限制快应用input组件的输入值个数 问题背景：

快应用中如何实现控制input输入，超过规定字数就弹窗提示且无法输入超过规定的字数？

实现方案：

可通过this.$watch()监测input组件的输入值和@change事件，当输入值超过限定字数给出弹窗提示，并强制将输入的值改为限定字数内。

实现代码：

<template>
  <div class="container">
    <text>仅支持输入5个值</text>
    <input class="input-text" id="text1" value="{{content}}" [@change](/user/change)="handleInputValueChanged">
  </div>
</template>

<style>
  .container {
    flex: 1;
    flex-direction: column;
    align-items: center;
  }
  .input-text {
    height: 100px;
    width: 85%;
    border: 1px solid #000000;
    font-size: 80px;
  }
</style>

<script>
  import prompt from '@system.prompt';
  module.exports = {
    data: {
      content: '',
      inputText: ''
    },
    onInit() {
      this.$page.setTitleBar({ text: '' })
    },
    test(e) {
      this.$watch('this.content', 'handleInputValueChanged')
    },
    handleInputValueChanged: function (e) {
      this.content = e.value;
      console.log('handleInputValueChanged:' + this.content);
      if (this.content.length === 5) {
        console.log('value length greater than 5');
        prompt.showToast({
          message: "消息最长为5",
          gravity: 'center'
        })
        this.inputText = this.content
      }
      if (this.content.length > 5) {
        this.content = this.inputText
      }
    },
  }
</script>