Vue项目中Cleave.js日期输入取值无分隔符问题咨询

嘿，这个问题我之前在项目里也踩过坑！Cleave.js的设计逻辑就是这样的——它会把纯数字的原始无格式值同步到你绑定的v-model里，而输入框显示的带分隔符的日期，只是它做的前端格式化展示，并不是实际绑定的数值。要拿到带分隔符的格式化值，有几个实用的解决方法：

方法1：通过实例直接获取格式化值 #

最简单的方式就是给输入框加个ref，然后调用Cleave实例的getFormattedValue()方法：

1. 先给输入框添加ref属性：

<input 
  ref="dateInput"
  v-model="rawDate"
  :options="{date: true, delimiter: '/', datePattern: ['m', 'd', 'Y']}"
/>

2. 当你需要用这个值的时候（比如提交表单），直接调用方法拿格式化后的结果：

const formattedDate = this.$refs.dateInput.cleave.getFormattedValue();
// 这里得到的就是"12/12/1995"这种带分隔符的格式

方法2：监听input事件同步显示值 #

因为输入框显示的内容就是它的value属性，你可以直接监听input事件，把这个显示值同步到另一个变量里：

<input 
  v-model="rawDate"
  :options="{date: true, delimiter: '/', datePattern: ['m', 'd', 'Y']}"
  @input="formattedDate = $event.target.value"
/>

然后在组件的data里定义formattedDate，之后直接用这个变量就可以拿到你想要的带分隔符的日期了。

方法3：封装自定义指令（适合多次使用的场景） #

如果你的项目里很多地方都要用这种日期输入，可以封装一个自定义指令，让它自动把格式化后的值同步到v-model，用起来更省心：

Vue.directive('cleave-date', {
  bind(el, binding, vnode) {
    const cleaveInstance = new Cleave(el, {
      date: true,
      delimiter: '/',
      datePattern: ['m', 'd', 'Y'],
      onValueChanged: function(event) {
        // 把格式化后的显示值同步到绑定的v-model变量
        vnode.context[binding.expression] = event.target.value;
      }
    });
    // 把实例存到元素上，方便销毁时清理
    el.cleaveInstance = cleaveInstance;
  },
  unbind(el) {
    el.cleaveInstance?.destroy();
  }
});

之后在组件里直接用这个指令就行：

<input v-cleave-date="formattedDate" />

这样formattedDate就会直接是带分隔符的日期值，不用再手动处理啦。

内容的提问来源于stack exchange，提问作者user1012181