fix(picker): enhance the compatibility of the date picker on mobile and PC, add isPCMode parameter to control the display logic (#3336)

Author: zzcr

packages/renderless/src/picker/index.ts

@@ -64,9 +64,9 @@ export const watchMobileVisible =
   }
 
 export const watchPickerVisible =
-  ({ api, vm, dispatch, emit, props, state, nextTick }) =>
+  ({ api, vm, dispatch, emit, props, state, nextTick, isPCMode }) =>
   (value) => {
-    if (props.readonly || state.pickerDisabled || state.isMobileScreen) return
+    if (props.readonly || state.pickerDisabled || (state.isMobileScreen && !isPCMode)) return
 
     if (value) {
       api.showPicker()
@@ -940,20 +940,27 @@ export const handleClose =
   }
 
 export const handleFocus =
-  ({ emit, vm, state, api, props }) =>
+  ({ emit, vm, state, api, props, isPCMode }) =>
   () => {
     const type = state.type
     if (props.readonly || state.pickerDisabled) {
       return
     }
 
+    // 判断当前日期选择器类型是否在触发类型列表中
     if (DATEPICKER.TriggerTypes.includes(type)) {
-      if (state.isMobileScreen && state.isDateMobileComponent) {
+      // 如果不是移动端屏幕或者强制使用PC端模式
+      if (!state.isMobileScreen || isPCMode) {
+        // 显示PC端的日期选择弹窗
+        state.pickerVisible = true
+      } else if (state.isDateMobileComponent) {
+        // 如果是移动端日期相关组件(日期、日期时间、日期范围等)
+        // 调用移动端日期选择器的显示方法
         api.dateMobileToggle(true)
-      } else if (state.isMobileScreen && state.isTimeMobileComponent) {
+      } else if (state.isTimeMobileComponent) {
+        // 如果是移动端时间相关组件(时间、时间范围等)
+        // 调用移动端时间选择器的显示方法
         api.timeMobileToggle(true)
-      } else {
-        state.pickerVisible = true
       }
     }
 
@@ -1057,15 +1064,15 @@ export const handlePick =
     if (!state.picker) return
 
     if (chooseOne) {
-      const minDate = date && date[0] || ''
+      const minDate = (date && date[0]) || ''
 
       state.userInput = [api.formatToString(minDate), null]
     } else {
       state.userInput = null
       state.pickerVisible = state.picker.state.visible = visible
-  
+
       api.emitInput(date, visible)
-  
+
       state.date = date
       state.picker.resetView && state.picker.resetView()
     }

packages/renderless/src/picker/vue.ts

@@ -176,7 +176,7 @@ const initState = ({ api, reactive, vm, computed, props, utils, parent, breakpoi
   return state
 }
 
-const initApi = ({ api, props, hooks, state, vnode, others, utils, parent }) => {
+const initApi = ({ api, props, hooks, state, vnode, others, utils, parent, isPCMode }) => {
   const { t, emit, dispatch, nextTick, vm } = vnode
   const { TimePanel, TimeRangePanel } = others
   const { destroyPopper, popperElm, updatePopper } = initPopper({ props, hooks, vnode })
@@ -190,7 +190,7 @@ const initApi = ({ api, props, hooks, state, vnode, others, utils, parent }) =>
     hidePicker: hidePicker({ destroyPopper, state }),
     handleSelectChange: ({ tz, date }) => !state.ranged && emit('select-change', { tz, date }),
     getPanel: getPanel(others),
-    handleFocus: handleFocus({ emit, vm, state, api, props }),
+    handleFocus: handleFocus({ emit, vm, state, api, props, isPCMode }),
     getTimezone: getTimezone({ props, utils }),
     emitChange: emitChange({ api, dispatch, emit, props, state }),
     parsedValue: parsedValue({ api, props, state, t }),
@@ -213,7 +213,7 @@ const initApi = ({ api, props, hooks, state, vnode, others, utils, parent }) =>
     handleClose: handleClose({ api, props, state }),
     displayValue: displayValue({ api, props, state }),
     handlePick: handlePick({ api, state }),
-    watchPickerVisible: watchPickerVisible({ api, vm, dispatch, emit, props, state, nextTick }),
+    watchPickerVisible: watchPickerVisible({ api, vm, dispatch, emit, props, state, nextTick, isPCMode }),
     watchMobileVisible: watchMobileVisible({ api, props, state, nextTick }),
     formatToString: formatToString({ api, state }),
     watchIsRange: watchIsRange({ api, state, TimePanel, TimeRangePanel }),
@@ -306,14 +306,14 @@ export const renderless = (
 ): IPickerApi => {
   const api = {} as IPickerApi
   const { reactive, computed, watch, onBeforeUnmount, inject, markRaw, onMounted } = hooks
-  const { vm, service, parent, useBreakpoint } = vnode
+  const { vm, service, parent, useBreakpoint, isPCMode } = vnode
   const { utils = {} } = service || {}
   const breakpoint = useBreakpoint()
   const state = initState({ api, reactive, vm, computed, props, utils, parent, inject, breakpoint })
 
   parent.tinyForm = parent.tinyForm || inject('form', null)
 
-  initApi({ api, props, hooks, state, vnode, others, utils, parent })
+  initApi({ api, props, hooks, state, vnode, others, utils, parent, isPCMode })
   initWatch({ api, state, props, watch, markRaw })
 
   api.initGlobalTimezone()