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

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

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

回答:

问题已解决。

问题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>

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注