自定义指令输入框只能输入正数

可以使用自定义指令来实现输入框只能输入正数的功能。

下面是一个实现该功能的自定义指令的示例代码：

Vue.directive('positive', {
  bind: function (el) {
    el.handler = function (event) {
      var input = event.target;
      var value = input.value;
      var newValue = value.replace(/[^\d.]/g, ''); // 只保留数字和小数点
      newValue = newValue.replace(/^\./g, ''); // 不允许以小数点开头
      newValue = newValue.replace(/\.{2,}/g, '.'); // 不允许出现多个小数点
      newValue = newValue.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 只允许出现一个小数点
      if (newValue !== value) {
        input.value = newValue;
        input.dispatchEvent(new Event('input')); // 触发input事件，更新v-model的值
      }
    };
    el.addEventListener('input', el.handler);
  },
  unbind: function (el) {
    el.removeEventListener('input', el.handler);
  }
})

该自定义指令会在输入框的输入事件上添加一个处理函数，该函数会对输入框的值进行处理，只保留数字和小数点，并且限制只能输入一个小数点、不允许以小数点开头、不允许出现多个小数点等。

在模板中使用该自定义指令：

<input v-positive v-model="num" type="text">

这样就可以实现只允许输入正数的输入框了。