Vue.js使用inputmask封装指令后输入框失焦placeholder消失如何解决

问题根源 #

该问题由两个配置错误共同导致：

1. 封装的数值输入组件未将外部传入的placeholder属性透传给内部原生input元素，原生input本身未拿到传入的占位符文本
2. 自定义v-regex指令的inputmask配置将占位符写死为空字符串，inputmask初始化后会覆盖原生input的placeholder属性，失焦时显示空的mask占位符，原占位符就会消失

修复步骤 #

1. 修复数值输入组件，透传placeholder属性 #

二选一即可：

• 显式声明props接收后绑定到内部input：

<template>
   <input
      v-regex="regex"
      type="text"
      :placeholder="placeholder"
   />
</template>
<script>
export default {
  props: {
    // 保留原有其他props配置，例如regex等
    placeholder: {
      type: String,
      default: ''
    }
  }
}
</script>

• 用$attrs批量透传所有非props原生属性，适合需要透传多个input原生属性的场景：

<template>
   <input
      v-regex="regex"
      type="text"
      v-bind="$attrs"
   />
</template>

如果使用Vue3，需要额外配置inheritAttrs: false避免属性挂载到组件根节点。

2. 修复v-regex自定义指令的inputmask配置 #

不再将inputmask的placeholder写死为空，优先读取原生input的占位符文本：

Vue.directive('regex', {
  bind(element, binding) {
    // 读取原生input已绑定的placeholder属性
    const nativePlaceholder = element.getAttribute('placeholder') || ''
    inputMask({
      regex: binding.value,
      placeholder: nativePlaceholder, // 替换为原生占位符文本
      showMaskOnHover: false,
      showMaskOnFocus: false,
      clearMaskOnLostFocus: false,
      // 可选配置：禁止inputmask自动修改原生placeholder属性，适配特殊场景
      // autoPlaceholder: 'none'
    }).mask(element)
  },
})

修改完成后，输入框失焦且无输入内容时，就会正常显示传入的write Number占位符。

内容的提问来源于stack exchange，提问作者J.Doe