ElementUI 日期时间选择器在 popper 关闭时更新

Question

我在 Vue.js 中使用 ElementUI。

我想做的是使用 el-date-picker 并仅在选择器的弹出器关闭时监听输入的更新（因此在通过鼠标单击/直接文本编辑或通过键盘箭头选择日期时更早更新控件不会触发我的 'special' 更新）- 是否容易实现？我正在考虑使用自定义 popper class 但不确定如何监听关闭事件来检测它。

Answer 1

您可以通过 blur 活动实现您想要的：https://element.eleme.io/#/en-US/component/date-picker#events

这里有一个 Codepen 如果你想玩的话。如果您只想运行，这里是代码：

var Main = {
    methods: {
      blur () {
        console.log('hey')
      }
    },
    data() {
      return {
        value1: ''
      };
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.8.2/lib/index.js"></script>
<div id="app">
<template>
  <div class="block">
    <span class="demonstration">Default</span>
    <el-date-picker
      v-model="value1"
      type="date"
      @blur="blur"
      placeholder="Pick a day">
    </el-date-picker>
  </div>
</template>
</div>

ElementUI 日期时间选择器在 popper 关闭时更新

ElementUI datetime picker update on popper close

datepicker

vue.js

vuejs2

element-ui