SimonHe
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(picker): fix mobile breakpoint cannot use pc datepicker and timepicker (#1678)

This commit is contained in:
Gweesin Chan 2024-07-27 11:46:20 +08:00 committed by GitHub
parent 335fc3883d
commit 0d003d8e7a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/renderless/src/picker/index.ts
View File

@ -66,7 +66,7 @@ export const watchMobileVisible =
export const watchPickerVisible =
({ api, vm, dispatch, emit, props, state, nextTick }) =>
(value) => {
if (props.readonly || state.pickerDisabled || state.isMobileScreen) return
if (props.readonly || state.pickerDisabled || state.isMobileMode) return
if (value) {
api.showPicker()
@ -939,9 +939,9 @@ export const handleFocus =
const type = state.type
if (DATEPICKER.TriggerTypes.includes(type)) {
if (state.isMobileScreen && state.isDateMobileComponent) {
if (state.isMobileMode && state.isDateMobileComponent) {
api.dateMobileToggle(true)
} else if (state.isMobileScreen && state.isTimeMobileComponent) {
} else if (state.isMobileMode && state.isTimeMobileComponent) {
api.timeMobileToggle(true)
} else {
state.pickerVisible = true

2
packages/renderless/src/picker/vue.ts
View File

@ -143,7 +143,7 @@ const initState = ({ api, reactive, vm, computed, props, utils, parent, breakpoi
labelTooltip: '',
displayOnlyTooltip: '',
isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
isMobileScreen: computed(() => breakpoint.current.value === 'default'),
isMobileMode: computed(() => vm.$mode.includes('mobile')),
dateMobileOption: {
visible: false,
type: props.type,

16
packages/vue/src/picker/src/mobile-first.vue
View File

@ -17,7 +17,7 @@
:tabindex="tabindex"
v-else-if="!state.ranged"
data-tag="tiny-date-editor"
:readonly="state.isMobileScreen || !editable || readonly || state.type === 'dates' || state.type === 'week'"
:readonly="state.isMobileMode || !editable || readonly || state.type === 'dates' || state.type === 'week'"
:disabled="state.pickerDisabled"
:size="state.pickerSize"
:name="name"
@ -49,7 +49,7 @@
</template>
<template #suffix>
<i data-tag="icon" class="flex items-center cursor-pointer">
<transition v-if="!state.isMobileScreen" name="tiny-transition-icon-scale-in">
<transition v-if="!state.isMobileMode" name="tiny-transition-icon-scale-in">
<component
:is="state.showClose ? clearIcon : null"
@click="handleClickIcon"
@ -106,7 +106,7 @@
:title="state.displayValue && state.displayValue[0]"
:disabled="state.pickerDisabled"
v-bind="state.firstInputId"
:readonly="state.isMobileScreen || !editable || readonly"
:readonly="state.isMobileMode || !editable || readonly"
:name="name && name[0]"
@input="handleStartInput"
@change="handleStartChange"
@ -136,7 +136,7 @@
:title="state.displayValue && state.displayValue[1]"
:disabled="state.pickerDisabled"
v-bind="state.secondInputId"
:readonly="state.isMobileScreen || !editable || readonly"
:readonly="state.isMobileMode || !editable || readonly"
:name="name && name[1]"
@input="handleEndInput"
@change="handleEndChange"
@ -146,7 +146,7 @@
/>
<i
@click="handleClickIcon"
v-if="!state.isMobileScreen && state.haveTrigger"
v-if="!state.isMobileMode && state.haveTrigger"
data-tag="tiny-input__icon tiny-range__close-icon"
:class="gcls('close-icon')"
>
@ -183,7 +183,7 @@
</div>
<!-- 大屏面板 -->
<component
v-if="!state.isMobileScreen"
v-if="!state.isMobileMode"
:is="state.panel"
:step="step"
:show-week-number="showWeekNumber"
@ -196,7 +196,7 @@
></component>
<!-- 小屏 - 日期面板 -->
<tiny-date-picker-mobile
v-if="state.isMobileScreen && state.isDateMobileComponent"
v-if="state.isMobileMode && state.isDateMobileComponent"
ref="datePickerMobile"
v-model="state.dateMobileOption.value"
:title="title"
@ -216,7 +216,7 @@
</tiny-date-picker-mobile>
<!-- 小屏 - 时间面板 -->
<tiny-time-picker-mobile
v-if="state.isMobileScreen && state.isTimeMobileComponent"
v-if="state.isMobileMode && state.isTimeMobileComponent"
ref="datePickerMobile"
v-model="state.timeMobileOption.value"
:default-value="state.timeMobileOption.defaultValue"