Question

我希望有一个我可以附加到任何<input>的自定义指令，它只会将其限制为alpha字符。这就是我到目前为止所拥有的：

然而，它有效，Vue.js文档状态：

除了el之外，您应该将这些参数视为只读，并且永远不要修改它们。

因此修改vnode是一个糟糕的模式。我怎样才能做到这一点？

Answer 1

您可以这样做：您的指令有一个input处理程序，用于检查是否包含禁止的字符，如果是，则将它们删除并发出新的input事件，以便更新所有内容。

当您重写其值时，光标移动到字段末尾的常见问题适用。

Vue.directive('limiter', {
  inserted(el, binding, vnode) {
    el.addEventListener('input', event => {
      const newValue = event.target.value;
      const cleaned = newValue.replace(/[^A-Za-z]/g, '');
      
      if (newValue !== cleaned) {
        event.target.value = cleaned;
        event.target.dispatchEvent(new Event('input'));
      }
    });
  }
});

new Vue({
  el: "#app",
  data() {
      return {
      name: '',
    };
	}
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <input v-model="name" v-limiter />
  <div>
    Your name is {{ name }}.
  </div>
</div>

如何在自定义指令中使v-model短路？

1 个答案: