fix: calculation for collapsing search form is incorrect while initially hidden (#6068)
* 修复当默认隐藏搜索表单时,折叠位置的计算不正确的问题
This commit is contained in:
parent
78c7c1589a
commit
8aa7dabeff
@ -2,13 +2,18 @@ import type { FormRenderProps } from '../types';
|
|||||||
|
|
||||||
import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue';
|
import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue';
|
||||||
|
|
||||||
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
|
import {
|
||||||
|
breakpointsTailwind,
|
||||||
|
useBreakpoints,
|
||||||
|
useElementVisibility,
|
||||||
|
} from '@vueuse/core';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 动态计算行数
|
* 动态计算行数
|
||||||
*/
|
*/
|
||||||
export function useExpandable(props: FormRenderProps) {
|
export function useExpandable(props: FormRenderProps) {
|
||||||
const wrapperRef = useTemplateRef<HTMLElement>('wrapperRef');
|
const wrapperRef = useTemplateRef<HTMLElement>('wrapperRef');
|
||||||
|
const isVisible = useElementVisibility(wrapperRef);
|
||||||
const rowMapping = ref<Record<number, number>>({});
|
const rowMapping = ref<Record<number, number>>({});
|
||||||
// 是否已经计算过一次
|
// 是否已经计算过一次
|
||||||
const isCalculated = ref(false);
|
const isCalculated = ref(false);
|
||||||
@ -31,6 +36,7 @@ export function useExpandable(props: FormRenderProps) {
|
|||||||
() => props.showCollapseButton,
|
() => props.showCollapseButton,
|
||||||
() => breakpoints.active().value,
|
() => breakpoints.active().value,
|
||||||
() => props.schema?.length,
|
() => props.schema?.length,
|
||||||
|
() => isVisible.value,
|
||||||
],
|
],
|
||||||
async ([val]) => {
|
async ([val]) => {
|
||||||
if (val) {
|
if (val) {
|
||||||
|
Loading…
Reference in New Issue
Block a user