如何在Vuejs中使用Vuejs/Vue- Cleave作为输入元素的指令？

Question

我使用vue-cleave来格式化Vuejs应用程序中的输入。但是，我将它定义为一个组件，并使用cleave标记来利用Vue-Cleave包。下面是使用示例：

<template>
  <cleave v-model="phoneNum" placeholder="Enter your phone number" :options="options"></cleave>
</template>

<script>
import Cleave from 'vue-cleave';
import CleavePhone from 'cleave.js/dist/addons/cleave-phone.i18n';

export default {
  data: function(){
    return {
      phoneNum:'',
      options: {
        phone: true,
        phoneRegionCode: 'US',
        delimiter: '-',
      }
    }
  components: {
    Cleave
  }
}
</script>

现在，这很好，但是我的要求是使用它作为input元素中的一个指令。模板中的代码将更改为：

<input cleave="options" v-model="phoneNum" placeholder="Enter your phone number">

所有这些，我都知道这可以在Angularjs中完成，正如本文所建议的：https://github.com/nosir/cleave.js/blob/master/doc/angularjs-directive-usage.md。

我如何在Vuejs中实现它？谢谢!

Answer 1

这就是我解决这个问题的方法：

模板：

<b-input type="tel" name="phone" ref="kPhone" v-model="phoneNumber" icon="phone"></b-input>

剧本：

mounted() {
let element = this.$refs.kPhone.$el.querySelector('input');
new Cleave(element, {
  phone: true,
  phoneRegionCode: "US",
  delimiter: "-"
});
}