Vant Input组件：如何仅在输入框聚焦时显示字数限制？-css教程-PHP中文网

Vant Input组件：如何仅在输入框聚焦时显示字数限制？

心靈之曲

发布： 2025-03-04 09:30:12

原创

756人浏览过

vant input组件：如何仅在输入框聚焦时显示字数限制？

Vant Input组件：巧妙实现聚焦状态下显示字数限制

Vant框架的van-field组件默认始终显示字数限制，但这并非所有场景的理想选择。本文将演示如何仅在输入框获得焦点时显示剩余字数。

核心在于根据输入框的焦点状态动态控制字数限制信息的显示与隐藏。由于Vant本身不提供此功能，我们需要借助Vue.js的特性。

解决方案：利用Vue计算属性和事件监听器。

我们创建一个计算属性showWordLimit，其值取决于输入框的焦点状态。当输入框聚焦时，showWordLimit为true，显示字数限制；失去焦点时，showWordLimit为false，隐藏字数限制。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

代码示例：

<template>
  <van-field v-model="inputValue" @focus="onFocus" @blur="onBlur">
    <template #suffix>
      <span v-if="showWordLimit">{{ remainingChars }}字</span>
    </template>
  </van-field>
</template>

<script>
import { ref, computed } from 'vue';
import { Field } from 'vant';

export default {
  components: {
    'van-field': Field
  },
  setup() {
    const inputValue = ref('');
    const isFocused = ref(false);
    const maxLength = 10; // 字数限制

    const remainingChars = computed(() => maxLength - inputValue.value.length);
    const showWordLimit = computed(() => isFocused.value);

    const onFocus = () => { isFocused.value = true; };
    const onBlur = () => { isFocused.value = false; };

    return { inputValue, remainingChars, showWordLimit, onFocus, onBlur };
  }
};
</script>

登录后复制

代码解释：