Popper关闭时的ElementUI日期时间选择器更新

Question

I'm using ElementUI with Vue.js.

What I want to do is to use el-date-picker and listen for the update of the input only when the picker's popper closes (so earlier updates when selecting date via mouse click / direct text edit or via keyboard arrow controls won't trigger my 'special' update) - is it easily achievable? I was thinking of using custom popper class but not sure how to listen for close event to detect it.

Answer 1

You can achieve what you want with the blur event : https://element.eleme.io/#/en-US/component/date-picker#events

Here is a Codepen if you want to play with it. And here is the code if you just want to run it :

 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>