Vue 2自定义数字输入框粘贴数据时值显示与元素属性不一致

问题根源 #

核心问题是粘贴带空格的文本时，浏览器默认粘贴行为会先把原始值写入输入框的DOM value 属性，之后组件的过滤逻辑仅更新了显示内容，但未同步修正DOM的value，也没正确更新v-model绑定的数据，最终导致显示值和DOM值脱节。

修复方案 #

1. 在数字输入组件中正确处理粘贴事件 #

修改v-digits-text-box组件，监听paste事件并手动处理粘贴内容，阻止默认行为避免原始值写入DOM：

<template>
  <v-text-input
    v-bind="$attrs"
    :value="cleanedValue"
    @input="handleInput"
    @paste="handlePaste"
  />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    cleanedValue() {
      // 过滤所有非数字字符，保留最多11位
      return this.value.replace(/\D/g, '').slice(0, 11)
    }
  },
  methods: {
    handleInput(e) {
      // 处理手动输入，过滤后更新父组件v-model
      const inputValue = e.target.value.replace(/\D/g, '').slice(0, 11)
      this.$emit('input', inputValue)
    },
    handlePaste(e) {
      // 阻止浏览器默认粘贴行为，避免原始值写入DOM
      e.preventDefault()
      // 获取剪贴板文本
      const pastedContent = e.clipboardData.getData('text')
      // 过滤非数字字符
      const cleanedPaste = pastedContent.replace(/\D/g, '')
      // 合并现有值与粘贴内容，截取11位
      const finalValue = (this.cleanedValue + cleanedPaste).slice(0, 11)
      // 更新父组件v-model
      this.$emit('input', finalValue)
      // 直接设置输入框DOM的value，确保显示与DOM值一致
      e.target.value = finalValue
    }
  }
}
</script>

2. 确保v-text-input是受控组件 #

检查v-text-input组件的实现，确保它通过value props接收外部值，而非内部维护独立的v-model状态，示例：

<template>
  <input
    type="text"
    :value="value"
    @input="$emit('input', $event.target.value)"
    v-bind="$attrs"
  />
</template>

<script>
export default {
  props: ['value']
}
</script>

关键说明 #

• 阻止默认粘贴行为：这是核心操作，避免浏览器直接将带空格的原始值写入输入框DOM。
• 同步更新绑定值与DOM值：处理完粘贴内容后，既要通过$emit('input')更新父组件的v-model绑定，也要直接设置输入框的value属性，确保显示内容、绑定数据、DOM值三者完全一致。
• 统一过滤逻辑：手动输入和粘贴操作使用相同的规则过滤非数字字符并限制长度，避免因处理逻辑不一致引发的问题。

内容的提问来源于stack exchange，提问作者tesicg