如何通过Vue.js中的输入值传递没有插件的掩码?

Question

到目前为止，我用纯JavaScript做了这个函数，但现在我不知道如何在vue.js中应用，也不知道哪个生命周期钩子适合这个。我是新手，所以这是对第一份工作的测试，我被困在这里了。

挑战在于通过输入传递电话掩码，如(xx)xxxxx-xxxx。另外一个挑战是将所有内容都放在一个HTML文件中。我使用Vue.js v2。

:

<v-text-field
id="phone"
onkeypress="mask(this, mphone)"
onblur="mask(this, mphone)"
v-model="numero"
maxlength="15"
label="Número com DDD"
:rules="rulesNum"
required
>
</v-text-field>

这是函数:

function mask(object) {
setTimeout(function() {
var valueInput = mphone(object.value);
if (valueInput != object.value) {
object.value = valueInput;
}
}, 1);
}
function  mphone(valueInput) {
var regex = valueInput.replace(/D/g, "");
regex = regex.replace(/^0/, "");
if (regex.length > 10) {
regex = regex.replace(/^(dd)(d{5})(d{4}).*/, "($1) $2-$3");
} else if (regex.length > 5) {
regex = regex.replace(/^(dd)(d{4})(d{0,4}).*/, "($1) $2-$3");
} else if (regex.length > 2) {
regex = regex.replace(/(d)(d{4})$/,"$1-$2");
} else {
regex = regex.replace(/^(d*)/, "($1");
}
return regex;
}

Answer 1

如果你只是想重构这些函数到一个值结构，你需要的是，在html元素上转换onkeypress和onblur为@keypress和@blur。之后，只需将函数放入值结构中的方法中，如下所示:

methods: {
mask: function(object) {
//your code
},
mphone: function(valueInput) {
//your code
}
}