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');
      }

现在，只有当我从输入中聚焦时才会更新值。有没有办法在输入仍处于焦点时进行更新？

Answer 1

为此，您必须在输入上定义自定义过滤器。像这样的东西

Vue.filter('mask', function (value) {
  if (value.length <= 3){
    var re = new RegExp("^([0-9]{"+value.length+"})$");
    return value = value.replace(re, '($1)');
  } 
  if (value.length > 3 && value.length <= 6){
    var re = new RegExp("^([0-9]{3})([0-9]{"+ (value.length - 3)+"})$");
    return value = value.replace(re, '($1)-$2');
  }
  if (value.length > 6 && value.length <= 10){
    var re = new RegExp("^([0-9]{3})([0-9]{3})([0-9]{"+(value.length-6)+"})$");
    return value = value.replace(re, '($1)-$2-$3');
  }
    return value;
})

然后将其应用到您的模板中。我做了一个jsfiddle（基于Vue页面的markdown示例）

请注意，您仍然必须处理长度大于 10 的值，并且我还更改了您的函数以使用if语句而不是switch-case