github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: rangePicker popup pos, close #6073, #6074

pull/6085/head
tangjinzhou 2022-11-07 15:23:24 +08:00
parent 7fa1fe428d
commit d484e1f6a0
1 changed files with 49 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
components/vc-picker/RangePicker.tsx
View File

@ -37,6 +37,7 @@ import useState from '../_util/hooks/useState';
import classNames from '../_util/classNames';
import { useProviderTrigger } from '../vc-trigger/context';
import { legacyPropsWarning } from './utils/warnUtil';
import { useElementSize } from '../_util/hooks/_vueuse/useElementSize';
function reorderValues<DateType>(
values: RangeValue<DateType>,
@ -372,15 +373,55 @@ function RangerPicker<DateType>() {
const startOpen = computed(() => mergedOpen.value && mergedActivePickerIndex.value === 0);
const endOpen = computed(() => mergedOpen.value && mergedActivePickerIndex.value === 1);
const panelLeft = ref(0);
const arrowLeft = ref(0);
// ============================= Popup =============================
// Popup min width
const popupMinWidth = ref(0);
watch(mergedOpen, () => {
const { width: containerWidth } = useElementSize(containerRef);
watch([mergedOpen, containerWidth], () => {
if (!mergedOpen.value && containerRef.value) {
popupMinWidth.value = containerRef.value.offsetWidth;
popupMinWidth.value = containerWidth.value;
}
});
const { width: panelDivWidth } = useElementSize(panelDivRef);
const { width: arrowWidth } = useElementSize(arrowRef);
const { width: startInputDivWidth } = useElementSize(startInputDivRef);
const { width: separatorWidth } = useElementSize(separatorRef);
watch(
[
mergedActivePickerIndex,
mergedOpen,
panelDivWidth,
arrowWidth,
startInputDivWidth,
separatorWidth,
() => props.direction,
],
() => {
arrowLeft.value = 0;
if (mergedOpen.value && mergedActivePickerIndex.value) {
if (startInputDivRef.value && separatorRef.value && panelDivRef.value) {
arrowLeft.value = startInputDivWidth.value + separatorWidth.value;
if (
panelDivWidth.value &&
arrowWidth.value &&
arrowLeft.value >
panelDivWidth.value -
arrowWidth.value -
(props.direction === 'rtl' || arrowRef.value.offsetLeft > arrowLeft.value
? 0
: arrowRef.value.offsetLeft)
) {
panelLeft.value = arrowLeft.value;
}
}
} else if (mergedActivePickerIndex.value === 0) {
panelLeft.value = 0;
}
},
{ immediate: true },
);
// ============================ Trigger ============================
const triggerRef = ref<any>();
@ -981,32 +1022,11 @@ function RangerPicker<DateType>() {
direction,
autocomplete = 'off',
} = props;
let arrowLeft = 0;
let panelLeft = 0;
if (
mergedActivePickerIndex.value &&
startInputDivRef.value &&
separatorRef.value &&
panelDivRef.value
) {
// Arrow offset
arrowLeft = startInputDivRef.value.offsetWidth + separatorRef.value.offsetWidth;
if (
panelDivRef.value.offsetWidth &&
arrowRef.value.offsetWidth &&
arrowLeft >
panelDivRef.value.offsetWidth -
arrowRef.value.offsetWidth -
(direction === 'rtl' || arrowRef.value.offsetLeft > arrowLeft
? 0
: arrowRef.value.offsetLeft)
) {
panelLeft = arrowLeft;
}
}
const arrowPositionStyle =
direction === 'rtl' ? { right: `${arrowLeft}px` } : { left: `${arrowLeft}px` };
direction === 'rtl'
? { right: `${arrowLeft.value}px` }
: { left: `${arrowLeft.value}px` };
function renderPanels() {
let panels: VueNode;
@ -1097,7 +1117,7 @@ function RangerPicker<DateType>() {
return (
<div
class={`${prefixCls}-panel-container`}
style={{ marginLeft: `${panelLeft}px` }}
style={{ marginLeft: `${panelLeft.value}px` }}
ref={panelDivRef}
onMousedown={e => {
e.preventDefault();
@ -1168,7 +1188,7 @@ function RangerPicker<DateType>() {
if (mergedActivePickerIndex.value === 0) {
activeBarWidth = startInputDivRef.value.offsetWidth;
} else {
activeBarLeft = arrowLeft;
activeBarLeft = arrowLeft.value;
activeBarWidth = endInputDivRef.value.offsetWidth;
}
}