如何在 Vue.js 2.5+ 中使用 Vue-IMask 和 Vuetify答案

【问题标题】：How to use Vue-IMask with Vuetify in Vue.js 2.5+如何在 Vue.js 2.5+ 中使用 Vue-IMask 和 Vuetify
【发布时间】：2018-12-08 17:17:40
【问题描述】：

如何在Vuetify 控件上使用Vue-IMask 指令，特别是v-text-field？它适用于 HTML 输入，但我在 v-text-field 上遇到错误。

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

vue-imask 指令似乎与 Vuetify 元素不兼容，因为它希望元素是 <input>，但 <v-text-field> 解析为 <div>（包含多个包含自定义输入的内部元素）。虽然文档显示了一个 example，您可以在其中通过计算属性使用 IMask，可能绑定到任何 v-model（可能包括 <v-text-field>），但我无法让该示例与任何元素一起使用。

您可以考虑将<v-text-field> 与vue-the-mask 等不同的屏蔽库一起使用，正如Vuetify docs 中所推荐的那样。

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-text-field v-mask="['(###)###-####', '#-###-###-####', '###-###-####']" placeholder="Enter phone number" />
      </v-content>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script src="https://unpkg.com/vue-the-mask@0.11.1/dist/vue-the-mask.js"></script>
  <script>
    Vue.use(VueTheMask)
    
    new Vue({
      el: '#app',
      vuetify: new Vuetify()
    })
  </script>
</body>
</html>

【讨论】：

似乎是Vuetify 1.5的一个特性，在今天的版本（2.2.16）中被移除了
@AdrienClerc 谢谢。我使用第三方库通过演示更新了答案。