Vue js 输入掩码

Question

我想在特定输入上有一个输入掩码，它将用户输入解析为人类可读的美国电话号码。

例如

用户输入：1231231234 用户查看：(123)-123-1234

到目前为止我所做的是，我做了一个如下所示的监视方法

switch (this.form.values.primary_phone.length) {
        case 3:
          return this.form.values.primary_phone = this.form.values.primary_phone.replace(/^([0-9]{3})$/, '($1)');
        case 6:
          return this.form.values.primary_phone = this.form.values.primary_phone.replace(/^([0-9]{3})([0-9]{3})$/, '($1)-$2');
        case 10:
          return this.form.values.primary_phone = this.form.values.primary_phone.replace(/^([0-9]{3})([0-9]{3})([0-9]{4})$/, '($1)-$2-$3');
      }

现在，只有当我从输入中聚焦时，这才会更新值。有没有一种方法可以在输入仍处于焦点状态时进行更新？

原文由 Steve 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我会建议你做一个包装 jquery 插件输入掩码 的指令。

有一个例子：

JavaScript

 Vue.directive('input-mask', {
  params: ['mask'],

  bind: function() {
    $(this.el).inputmask({
      mask: this.params.mask
    });

  },
});

var vm = new Vue({
  el: 'body',
  data: {
    value: '',
  }
});

HTML

 <!-- Import Styles/Scripts from the plugin and do not forget the jQuery library -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

<p>Selected: {{value}}</p>
<input v-model="value" v-input-mask mask="[phone]">

如果您需要，可以使用 JSBin 向您展示它是如何工作的。

原文由 Gustavo Bissolli 发布，翻译遵循 CC BY-SA 3.0 许可协议