diff --git a/packages/core/src/components/freeDom.ts b/packages/core/src/components/freeDom.ts index 8883404..f9a458b 100644 --- a/packages/core/src/components/freeDom.ts +++ b/packages/core/src/components/freeDom.ts @@ -232,8 +232,8 @@ const freeDom = defineComponent({ } const onResize: ResizeFnCallback = (evt, { node, width: w, height: h, handle: axis }) => { - const offsetW = -(w - width.value) - const offsetH = -(h - height.value) + const offsetW = -(w - (width.value || 0)) + const offsetH = -(h - (height.value || 0)) const axisH = axis[0] const axisV = axis[axis.length - 1] diff --git a/packages/core/src/hooks/use-resizable-data.ts b/packages/core/src/hooks/use-resizable-data.ts index f45892a..5ef7b78 100644 --- a/packages/core/src/hooks/use-resizable-data.ts +++ b/packages/core/src/hooks/use-resizable-data.ts @@ -17,10 +17,14 @@ export function useResizableData( height.value = getHeight() }) function getWidth() { - return props.w || props.modelValue.w || props.minWidth + return props.w + || props.modelValue.w + || (props.autoSize ? undefined : props.minWidth) } function getHeight() { - return props.h || props.modelValue.h || props.minHeight + return props.h + || props.modelValue.h + || (props.autoSize ? undefined : props.minHeight) } async function syncSize( fixNonMonospaced: boolean, diff --git a/packages/examples/free-dom/basic/single.vue b/packages/examples/free-dom/basic/single.vue index c4c2f03..ef427d6 100644 --- a/packages/examples/free-dom/basic/single.vue +++ b/packages/examples/free-dom/basic/single.vue @@ -1,10 +1,10 @@ diff --git a/packages/index.md b/packages/index.md index 9c324e8..9ce97b8 100644 --- a/packages/index.md +++ b/packages/index.md @@ -19,9 +19,17 @@ title: '首页' ### 属性 +:::info +如果元素创建之初可以确定它的大小,可以禁用`autoSize`来优化性能 +::: + | 名称 | 类型 | 必填 | 默认值 | 可选值 | 说明 | | ---- | ---- | ---- | ----- | ----- | --- | -| v-model/model-value | object | ❌ | - | - | 元素的位置及尺寸 +| v-model/model-value | object | ❌ | - | - | 元素的位置及尺寸 +| v-model:x/x | number | ❌ | - | - | 元素在x轴上的位置 +| v-model:y/y | number | ❌ | - | - | 元素在y轴上的位置 +| v-model:w/w | number | ❌ | - | - | 元素的宽度 +| v-model:h/h | number | ❌ | - | - | 元素的高度 | active | boolean | ❌ | - | boolean | 手动控制元素的选中与否,仅影响样式 | | lock-aspect-ratio | boolean | ❌ | false | - | 缩放时是否按当前宽高比计算 | handle | string | ❌ | - | - | 通过class或id指定允许触发拖曳的元素