From 6c41e28023f78259702caae33ae40222a6bc8dfa Mon Sep 17 00:00:00 2001 From: eleven Date: Sat, 20 Feb 2021 09:50:35 +0800 Subject: [PATCH 1/5] fix warning tip --- src/components/hooks.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/hooks.ts b/src/components/hooks.ts index 13a0ce6..3f448ff 100644 --- a/src/components/hooks.ts +++ b/src/components/hooks.ts @@ -96,10 +96,10 @@ export function initState(props: any, emit: any) { setResizingMaxWidth, setResizingMinWidth, setResizingMinHeight, - $setWidth: (val: number) => setWidth(Math.floor(val)), - $setHeight: (val: number) => setHeight(Math.floor(val)), - $setTop: (val: number) => setTop(Math.floor(val)), - $setLeft: (val: number) => setLeft(Math.floor(val)) + setWidthFun: (val: number) => setWidth(Math.floor(val)), + setHeightFun: (val: number) => setHeight(Math.floor(val)), + setTopFun: (val: number) => setTop(Math.floor(val)), + setLeftFun: (val: number) => setLeft(Math.floor(val)) } } @@ -134,7 +134,7 @@ export function initLimitSizeAndMethods( resizingMinWidth, resizingMinHeight } = containerProps - const { $setWidth, $setHeight, $setTop, $setLeft } = containerProps + const { setWidthFun, setHeightFun, setTopFun, setLeftFun } = containerProps const { parentWidth, parentHeight } = parentSize const limitProps = { minWidth: computed(() => { @@ -175,7 +175,7 @@ export function initLimitSizeAndMethods( if (props.disabledW) { return width.value } - return $setWidth( + return setWidthFun( Math.min( limitProps.maxWidth.value, Math.max(limitProps.minWidth.value, val) @@ -186,7 +186,7 @@ export function initLimitSizeAndMethods( if (props.disabledH) { return height.value } - return $setHeight( + return setHeightFun( Math.min( limitProps.maxHeight.value, Math.max(limitProps.minHeight.value, val) @@ -197,7 +197,7 @@ export function initLimitSizeAndMethods( if (props.disabledY) { return top.value } - return $setTop( + return setTopFun( Math.min( limitProps.maxTop.value, Math.max(limitProps.minTop.value, val) @@ -208,7 +208,7 @@ export function initLimitSizeAndMethods( if (props.disabledX) { return left.value } - return $setLeft( + return setLeftFun( Math.min( limitProps.maxLeft.value, Math.max(limitProps.minLeft.value, val) From 0940c38e4a17070445b4dae413860425ba6246f8 Mon Sep 17 00:00:00 2001 From: eleven Date: Wed, 24 Feb 2021 12:14:09 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E7=BB=84=E4=BB=B6=E5=A4=96=E9=83=A8=E6=97=B6?= =?UTF-8?q?=E5=80=99=E6=98=AF=E5=90=A6=E5=81=9C=E7=94=A8=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE=20=E7=9B=91=E5=90=AC?= =?UTF-8?q?=E7=AA=97=E5=8F=A3=E5=8F=98=E5=8C=96=E6=97=B6=E5=80=99=EF=BC=8C?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=BB=84=E4=BB=B6=E7=88=B6=E7=BA=A7=E5=85=83?= =?UTF-8?q?=E7=B4=A0=E9=99=90=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 +++ docs/document_zh.md | 11 +++ src/App.vue | 6 +- src/components/Vue3DraggableResizable.ts | 24 +++--- src/components/hooks.ts | 69 +++++++++------ src/index.js | 8 +- .../components/Vue3DraggableResizable.d.ts | 20 +++-- typings/components/hooks.d.ts | 14 +-- typings/components/utils.d.ts | 4 +- typings/index.d.ts | 86 ++++++++++++------- 10 files changed, 165 insertions(+), 89 deletions(-) diff --git a/README.md b/README.md index b699caf..6227ea5 100644 --- a/README.md +++ b/README.md @@ -86,6 +86,7 @@ Here is a complete example of using "vue-template" v-model:active="active" :draggable="true" :resizable="true" + :preventDeactivated="false" @activated="print('activated')" @deactivated="print('deactivated')" @drag-start="print('drag-start')" @@ -276,6 +277,17 @@ The `lockAspectRatio` property is used to lock aspect ratio. ``` +#### preventDeactivated + +type:`Boolean`
+default:`false`
+ +Determines if the component should be deactivated when the user clicks/taps outside it. + +```html + +``` + #### disabledX type: `Boolean`
diff --git a/docs/document_zh.md b/docs/document_zh.md index 8f7a2df..33a55fd 100644 --- a/docs/document_zh.md +++ b/docs/document_zh.md @@ -275,6 +275,17 @@ default: `false`
``` +#### preventDeactivated + +type:`Boolean`
+default:`false`
+ +确定当用户在其外部单击/点击时是否应停用该组件 + +```html + +``` + #### disabledX type: `Boolean`
diff --git a/src/App.vue b/src/App.vue index 86ba3be..2474f0c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -30,6 +30,7 @@ :disabledH="false" :disabledY="false" :lockAspectRatio="true" + :preventDeactivated="false" classNameHandle="my-handle" @activated="print('activated')" @deactivated="print('deactivated')" @@ -74,11 +75,8 @@ export default defineComponent({