如何通过 vant-field 输入框实现聚焦后才展示字数限制？

在使用Vant组件库开发移动端应用时，我们经常会遇到需要给输入框添加字数限制的场景，默认情况下字数提示会一直显示在输入框下方，占用页面空间。如果希望只有在输入框聚焦时才展示字数限制，失焦后隐藏提示，可以通过状态控制结合vant-field的事件来实现。

实现思路

核心逻辑是通过一个布尔类型的状态变量控制字数提示区域的显示与隐藏，然后将这个变量和vant-field的focus和blur事件绑定：当输入框聚焦时，将变量设为true，显示字数提示；当输入框失焦时，将变量设为false，隐藏字数提示。

完整代码示例

模板部分

使用vant-field组件，绑定v-model获取输入值，同时绑定@focus和@blur事件，通过v-if或者v-show控制字数提示的显示，这里推荐使用v-show避免频繁创建销毁DOM节点。

<template>
  <div class="input-container">
    <van-field
      v-model="inputValue"
      label="内容"
      placeholder="请输入内容"
      maxlength="20"
      @focus="handleFocus"
      @blur="handleBlur"
    />
    <div class="word-limit" v-show="isShowLimit">
      已输入 {{ inputValue.length }} / 20 字
    </div>
  </div>
</template>

逻辑部分

在data中定义状态变量和输入值变量，在methods中定义聚焦和失焦的处理函数，修改状态变量的值。

<script>
import { Field } from 'vant';

export default {
  components: {
    'van-field': Field
  },
  data() {
    return {
      inputValue: '', // 输入框绑定的值
      isShowLimit: false // 控制字数提示是否显示的状态变量
    };
  },
  methods: {
    // 输入框聚焦时触发，显示字数提示
    handleFocus() {
      this.isShowLimit = true;
    },
    // 输入框失焦时触发，隐藏字数提示
    handleBlur() {
      this.isShowLimit = false;
    }
  }
};
</script>

样式部分

可以给字数提示区域添加一些基础样式，让页面更美观，比如调整字体大小和颜色，和输入框保持合适的间距。

<style scoped>
.input-container {
  padding: 16px;
}
.word-limit {
  font-size: 12px;
  color: #969799;
  text-align: right;
  margin-top: 4px;
  padding-right: 8px;
}
</style>

注意事项

• 如果输入框有初始值，页面加载时不需要展示字数提示，所以状态变量默认设为false即可，不需要额外处理。
• 如果页面有多个类似的输入框需要实现该效果，可以把状态和输入框的索引绑定，避免多个输入框的状态互相影响。
• 使用v-show比v-if更合适，因为聚焦失焦是高频操作，v-show只是切换CSS的display属性，性能更好。

vant_field字数限制输入框聚焦前端开发Vue修改时间：2026-06-08 22:15:22