+
@@ -86,8 +93,13 @@ import YearPickerPanel from './src/year-picker-panel.vue'
import DayPickerPanel from './src/day-picker-panel.vue'
import { props, MONTH_LIST, WEEK_HEADER } from './props'
import { isArray, toNumber } from '../utils/shared'
+import { nextTickFrame } from '../utils/elements'
import { pack } from '../locale'
+let startX = 0
+let startY = 0
+let checkType = ''
+let touchDirection
const currentDate = dayjs().format('YYYY-MM-D')
const [currentYear, currentMonth] = currentDate?.split('-')
const monthDes = MONTH_LIST.find((month) => month.index === currentMonth)
@@ -223,6 +235,17 @@ export default defineComponent({
isSameMonth() {
return this.chooseMonth?.index === this.previewMonth.index
},
+
+ getPanelType() {
+ if (this.isYearPanel) return 'year'
+ if (this.type === 'month' || this.isMonthPanel) return 'month'
+ if (this.type === 'date') return 'date'
+ return ''
+ },
+
+ isUntouchable() {
+ return !this.touchable || ['', 'year'].includes(this.getPanelType)
+ },
},
watch: {
@@ -245,6 +268,10 @@ export default defineComponent({
},
immediate: true,
},
+
+ getPanelType() {
+ this.resetState()
+ },
},
methods: {
@@ -441,6 +468,42 @@ export default defineComponent({
this.previewMonth = monthDes
this.previewYear = yearValue
},
+
+ handleTouchstart(event) {
+ if (this.isUntouchable) return
+ const { clientX, clientY } = event.touches[0]
+ startX = clientX
+ startY = clientY
+ },
+
+ getDirection(x, y) {
+ return x >= y && x > 20 ? 'x' : 'y'
+ },
+
+ handleTouchmove(event) {
+ if (this.isUntouchable) return
+ const { clientX, clientY } = event.touches[0]
+ const x = clientX - startX
+ const y = clientY - startY
+ touchDirection = this.getDirection(Math.abs(x), Math.abs(y))
+ checkType = x > 0 ? 'prev' : 'next'
+ },
+
+ handleTouchend() {
+ if (this.isUntouchable || touchDirection !== 'x') return
+ const componentRef = this.getPanelType === 'month' ? 'monthPanelEl' : 'dayPanelEl'
+ nextTickFrame(() => {
+ this.$refs[componentRef].forwardRef(checkType)
+ this.resetState()
+ })
+ },
+
+ resetState() {
+ startY = 0
+ startX = 0
+ checkType = ''
+ touchDirection = undefined
+ },
},
})
diff --git a/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
index 593d81e..b15d82f 100644
--- a/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
@@ -52,6 +52,120 @@ exports[`test allowedDates prop 1`] = `