vue框架下使用element-ui的DateTimePicker，怎么控制只有在点击“确定”按钮和“此刻”按钮时修改时间？

Question

我尝试过封装DateTimePicker，用组件的change事件改变model，然后再用ref获取到内部的input改变显示值，但是有两个问题无法解决：
1.点击组件外部区域时，也会触发change事件
2.内部input的值无法修改，应该时和组件内部数据做了双向绑定

大佬们有没有别的思路实现这个需求呢？

Answer 1

问题已解决。

问题1：点击组件外部区域时，也会触发change事件
解决思路：经过查看element-ui源码，发现组件使用自定义指令v-clickoutside，触发了handleClose函数，且此函数只有此处调用。因此在封装的父组件中重写handleClose，调用时保存一个标识符，在change回调函数中通过标识符判断情况

问题2：内部input的值无法修改，应该是和组件内部数据做了双向绑定
解决思路：并非是做了双向绑定，而是需要延后设值

最后贴上代码：

<template>
  <el-date-picker v-model="hValue" @change="handleChange"></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      hValue: "",
      clickOutsideFlag: false,
      childHandleClose: null
    };
  },
  props: {
    value: {
      type: [Date, String, Array],
      required: true
    }
  },
  created() {
    this.$nextTick(() => {
      this.childHandleClose = this.$refs.datePicker.handleClose;
      this.$refs.datePicker.handleClose = this.handleClose;
    });
  },
  watch: {
    value(val) {
      this.hValue = val;
      this.updateInput();
    },
    hValue(val) {
      if (val === null) {
        this.hValue = "";
      }
      this.updateInput();
    }
  },
  methods: {
    handleChange() {
      if (!this.clickOutsideFlag) {
        this.updateInput();
        this.$emit("input", this.hValue);
        this.$emit("change", this.hValue);
      } else {
        this.clickOutsideFlag = false;
        this.hValue = this.value;
      }
    },
    handleClose() {
      if (this.$refs.datePicker.pickerVisible) {
        this.clickOutsideFlag = true;
        this.childHandleClose();
      }
    },
    updateInput() {
      this.$nextTick(() => {
        this.$refs.datePicker.$refs.reference.$refs.input.value = this.value;
      });
    }
  }
};
</script>