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

在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>

在这个示例中，我们定义了一个easyinput组件，并通过v-model绑定了inputValue来获取输入的文本。同时，我们设置了最大字数限制maxLength。通过在handleInput方法中使用e.target.value.length来动态获取当前输入的字数，并更新inputLength变量。在模板中，我们使用双括号{{ }}来显示当前输入的字数和最大字数限制。