用于输入的VUE 3模式

thtygnil  于 2022-09-18  发布在  Java
关注(0)|答案(3)|浏览(106)

我想创建输入,如果模式不匹配,我可以用空字符替换输入的字符。

模板:

<input
  type="text"
  :value="val"
  @input="input"
/>

脚本:

import { ref } from "vue";
export default {
  setup() {
    let val = ref("");
    const input = ({ target }) => {
      val.value = target.value.replace(/[^d]/g, "");
    };
    return { val, input };
  },
};

Sandbox

zbdgwd5y

zbdgwd5y1#

您可以使用Watcher删除输入的数字:

const { ref, watch } = Vue
const app = Vue.createApp({
  setup() {
    let val = ref("");
    watch(val,
      (newValue, oldValue) => {
        val.value = newValue.replace(/d+/g, "")
      },
    );
    return { val };
  },
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div>
    <input
      type="text"
      placeholder="Full Name"
      autocomplete="off"
      v-model="val"
    />
  </div>
  {{ val }}
</div>
bnlyeluc

bnlyeluc2#

如果您想让用户只输入数字,您也可以使用<input type="number">在本机的HTML中这样做。

rbl8hiat

rbl8hiat3#

在代码中,当模式匹配时将替换内容。根据您的问题,当模式不匹配时,您希望将其设为空。

setup() {
    let val = ref("");
    const input = ({ target }) => {
      if (target && !target.value) val.value = "";
      if (!/[^d]/g.test(target.value)) {
        val.value = "";
      }
      val.value = target.value;
      // val.value = target.value.replace(/[^d]/g, "");
    };
    return { val, input };
  },

如果您还想在更多的输入域中实现,则更好的方法是使用指令。

const app = createApp({})

app.directive('text-format', {
    mounted(el, binding) {
    el._listner = el.addEventListener("input", (e) => {
      if (!binding.value.test(el.value)) {
        el.value = "";
      }
    });
  },
  unmounted(el) {
    el.removeEventListener("input", el._listner);
  },
})

现在是您的输入字段

<input
      v-text-format="/[^d]/g"
      type="text"
      placeholder="Full Name"
      autocomplete="off"
      v-model="val"
    />

相关问题