uniapp 小程序 easyinput 组件 动态显示输入的字数和限制的字数

<template>
  <view>
    <easyinput
      class="input"
      type="text"
      v-model="inputValue"
      :maxlength="maxLength"
      @input="handleInput"
      placeholder="请输入内容"
    />
    <view class="counter">
      已输入 {{ inputLength }} / {{ maxLength }} 字
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      maxLength: 100, // 设置输入字数的最大限制
      inputLength: 0, // 初始输入字数
    };
  },
  methods: {
    handleInput(e) {
      // 动态更新输入字数
      this.inputLength = e.target.value.length;
    },
  },
};
</script>

<style>
.input {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
.counter {
  color: #888;
  font-size: 14px;
}
</style>