Vue 组件获取和设置转换 imask.js

Question

我正在尝试使用 iMask.js 将我的组件的 'yyyy-mm-dd' 更改为 'dd/mm/yyyy' 但是当我设置值时，我认为它是在 iMask 完成之前获取值.我认为使用 maskee.updateValue() 可以，但不知道如何从我的组件访问 maskee。

我也不确定是否应该使用指令来执行此操作。

Vue.component("inputx", {
  template: `
  <div>
  <input v-mask="" v-model="comp_date"></input>
  </div>
    `,
  props: {
    value: { type: String }
  },
  computed: {
    comp_date: {
      get: function () {
        return this.value.split("-").reverse().join("/");
      },
      set: function (val) {
        const iso = val.split("/").reverse().join("-");            
        this.$emit("input", iso);
      }
    }
  },
  directives: {
    mask: {
      bind(el, binding) {
        var maskee = IMask(el, {
          mask: "00/00/0000",
          overwrite: true,
        });
      }
    }
  }
});

var app = new Vue({
  el: "#app",
  data: {
    date: "2020-12-30"
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://unpkg.com/imask"></script>

<div id="app">
    <inputx v-model="date"></inputx>    
    Date: {{date}}
</div>

Answer 1

实现此目的的最简单方法是在 Vue 组件的挂载钩子上安装外部功能，而不是使用指令。

通过这种方式，您可以将 'maskee' 对象存储在组件的数据对象上，以便稍后从 setter 方法访问它。

在 setter 方法中，您可以按照提示调用 'updateValue' 方法。然后，您只需访问 'maskee' 对象的 '_value' 属性即可提取处理后的值。

这是一个工作示例：

 Vue.component("inputx", {
template: `
<div>
<input ref="input" v-model="comp_date"></input>
</div>
  `,
data: {
  maskee: false,
},
props: {
  value: { type: String },
},
computed: {
  comp_date: {
    get: function () {
      return this.value.split("-").reverse().join("/");
    },
    set: function () {
      this.maskee.updateValue()
      const iso = this.maskee._value.split("/").reverse().join("-");            
      this.$emit("input", iso);
    }
  }
},
mounted(){
  console.log('mounted');
  const el = this.$refs.input;

  this.maskee = IMask(el, {
    mask: "00/00/0000",
    overwrite: true,
  });
  console.log('maskee created');
}
  });

var app = new Vue({
  el: "#app",
  data: {
    date: "2020-12-30"
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://unpkg.com/imask"></script>

<div id="app">
    <inputx v-model="date"></inputx>    
    Date: {{date}}
</div>

Vue 组件获取和设置转换 imask.js

Vue component get and set conversion with imask.js

javascript

masking

vue.js