Question

问题
在输入上应用遮罩时，值会更改，但光标不在输入的末尾。

示例
键入：0123456789我得到+33 2 34 56 71 30

提琴：https://jsfiddle.net/pflaho/21nrm6tp/5/

代码

<script src='https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js'></script>
<div id="app">
  <h2>Phone</h2>
  <v-text-field type="text" v-model="tel" :mask="mask"></v-text-field>
</div>

和

new Vue({
  el: "#app",
  data: {
    mask: "",
    tel: ""
  },
  watch: {
    tel(v) {
      if (v.charAt(0) == "0") {
        this.tel = '+33'
        this.mask = "+33 # ## ## ## ##"
      }
    }
  }
})

Answer 1

每次mask更改时，您都在设置tel。您只需将其设置为一次（仅当它为空并且您根据情况需要时）。

并在不需要时将其重置。

tel(v) {
    if (v.charAt(0) == "0") {
        this.tel = '+33'
        if(!this.mask.length){ this.mask = "+33 # ## ## ## ##" }
    }
    else{
        this.mask = ""
    }
}

Fiddle

Vuetify / v-text-field / mask：错误的光标位置

1 个答案: