javascript - 单击外部输入后，Vue.js inputmask隐藏占位符

Question

• 我正在做一个 vue 项目，我有一个组件是这样的数字输入：

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

• v-regex 指令是使用 inputmask 创建的，如下所示：

Vue.directive('regex', {
         bind(element, binding) {
            inputMask({
               regex: binding.value,
               placeholder: '',
               showMaskOnHover: false,
               showMaskOnFocus: false,
               clearMaskOnLostFocus: false,
            }).mask(element)
         },
      })

- 并且该组件在这样的表单中使用：

<myComponent
 id="myId"
 class="my-class"
 :placeholder="'write Number'"
/>

我遇到的问题是：当我在输入内部单击然后在其外部单击时，占位符“写入数字”消失并且除非我刷新页面，否则不再显示，有没有办法解决这个问题？谢谢你

标签： javascriptvue.jsvue-componentinput-mask

Answer 1

您正在使用placeholderinputMask 组件的属性，请参阅此处的文档。这是不同的功能，例如占位符用于数字。如果您将该占位符直接放在<input>标签上，它将像您期望的那样工作。