2
0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-24 02:40:35 +03:00

fix: compatible with mobile click events (#334)

This commit is contained in:
mengxiong10
2019-10-23 11:17:46 +08:00
parent 43c59e6b40
commit 57d57fc645
+15 -8
View File
@@ -1,6 +1,8 @@
<template> <template>
<div <div
class="mx-datepicker" class="mx-datepicker"
@mousedown="showPopup"
@touchstart="showPopup"
:class="{ :class="{
'mx-datepicker-range': range, 'mx-datepicker-range': range,
'disabled': disabled 'disabled': disabled
@@ -9,8 +11,7 @@
'width': computedWidth 'width': computedWidth
}" }"
> >
<div class="mx-input-wrapper" <div class="mx-input-wrapper">
@click.stop="showPopup">
<input <input
:class="inputClass" :class="inputClass"
:name="inputName" :name="inputName"
@@ -30,7 +31,7 @@
<span <span
v-if="showClearIcon" v-if="showClearIcon"
class="mx-input-append mx-clear-wrapper" class="mx-input-append mx-clear-wrapper"
@click.stop="clearDate"> @mousedown.stop="clearDate">
<slot name="mx-clear-icon"> <slot name="mx-clear-icon">
<i class="mx-input-icon mx-clear-icon"></i> <i class="mx-input-icon mx-clear-icon"></i>
</slot> </slot>
@@ -362,11 +363,17 @@ export default {
) { ) {
return return
} }
this.closePopup()
mousedownTarget = null mousedownTarget = null
this.closePopup()
} }
document.addEventListener('mousedown', this._bindDocmentMousedown) this._startEvt = 'mousedown'
document.addEventListener('mouseup', this._bindDocumentMouseup) this._endEvt = 'mouseup'
if ('ontouchend' in document) {
this._startEvt = 'touchstart'
this._endEvt = 'touchend'
}
document.addEventListener(this._startEvt, this._bindDocmentMousedown)
document.addEventListener(this._endEvt, this._bindDocumentMouseup)
this._displayPopup = throttle(() => { this._displayPopup = throttle(() => {
if (this.popupVisible) { if (this.popupVisible) {
@@ -380,8 +387,8 @@ export default {
if (this.popupElm && this.popupElm.parentNode === document.body) { if (this.popupElm && this.popupElm.parentNode === document.body) {
document.body.removeChild(this.popupElm) document.body.removeChild(this.popupElm)
} }
document.removeEventListener('mousedown', this._bindDocmentMousedown) document.removeEventListener(this._startEvt, this._bindDocmentMousedown)
document.removeEventListener('mouseup', this._bindDocumentMouseup) document.removeEventListener(this._endEvt, this._bindDocumentMouseup)
window.removeEventListener('resize', this._displayPopup) window.removeEventListener('resize', this._displayPopup)
window.removeEventListener('scroll', this._displayPopup) window.removeEventListener('scroll', this._displayPopup)
}, },