vue自定义指令限制input

要限制输入框的内容，可以通过自定义指令来实现。下面是一个例子，该指令可以限制输入框只能输入数字和小数点：

<template>
  <div>
    <input v-model="price" v-decimal-input />
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 0
    };
  }
};
</script>

<style scoped>
</style>

// 注册自定义指令
Vue.directive("decimal-input", {
  bind(el) {
    el.addEventListener("input", e => {
      const { value } = e.target;
      e.target.value = value.replace(/[^\d.]/g, "");
    });
  }
});

在上面的例子中，我们注册了一个名为 `decimal-input` 的自定义指令，并在输入框中使用了该指令。该指令绑定了一个 `input` 事件，当用户输入时，会将非数字和小数点的字符替换为空字符串。这样就可以限制用户只能输入数字和小数点了。

相关问题

Vue 自定义指令处理input 长度，怎么写

可以使用 Vue 自定义指令来处理 input 长度限制，具体实现流程如下：

1. 在 Vue 实例中定义一个名为 `limit` 的自定义指令，使用 `Vue.directive()` 方法来注册：

Vue.directive('limit', {
  bind(el, binding) {
    let maxLength = binding.value;
    let input = el.querySelector('input');
    input.addEventListener('input', () => {
      let value = input.value;
      if (value.length > maxLength) {
        input.value = value.slice(0, maxLength);
      }
    });
  }
})

2. 在模板中使用 `v-limit` 指令，并传入最大长度值：

<template>
  <div>
    <input v-limit="10" />
  </div>
</template>

在上述代码中，我们定义了一个名为 `limit` 的指令，并在 `bind` 钩子函数中绑定了一个 `input` 事件监听器，当输入框的值超过最大长度时，我们截取其前面的部分。然后在模板中使用 `v-limit` 指令并传入最大长度值即可实现输入框长度限制。

vue自定义指令el-input只能输入正整数

可以通过Vue自定义指令来实现只能输入正整数的功能。具体实现方式可以参考以下代码：

// 注册一个只允许输入正整数的指令
Vue.directive('integer', {
  // 当绑定的元素插入到 DOM 中时执行
  inserted: function (el) {
    // 限制输入非数字字符和小数点
    el.addEventListener('keypress', function (event) {
      var keyCode = event.keyCode ? event.keyCode : event.which;
      if (keyCode < 48 || keyCode > 57) {
        event.preventDefault();
      }
    });
    // 限制粘贴非数字字符和小数点
    el.addEventListener('paste', function (event) {
      var value = event.clipboardData.getData('text/plain');
      if (/\D/.test(value)) {
        event.preventDefault();
      }
    });
  }
});

然后在el-input元素上使用该指令即可：

<el-input v-model="inputValue" v-integer></el-input>

这样就可以保证el-input中只能输入正整数了。