警告提示修复以及拓展配置属性

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.
 <Vue3DraggableResizable :lockAspectRatio="true" />
 ```
 
+#### preventDeactivated
+
+type:`Boolean`<br>
+default:`false`<br>
+
+Determines if the component should be deactivated when the user clicks/taps outside it.
+
+```html
+<Vue3DraggableResizable :preventDeactivated="false"/>
+```
+
 #### disabledX
 
 type: `Boolean`<br>

docs/document_zh.md

@@ -275,6 +275,17 @@ default: `false`<br>
 <Vue3DraggableResizable :lockAspectRatio="true" />
 ```
 
+#### preventDeactivated
+
+type:`Boolean`<br>
+default:`false`<br>
+
+确定当用户在其外部单击/点击时是否应停用该组件
+
+```html
+<Vue3DraggableResizable :preventDeactivated="false"/>
+```
+
 #### disabledX
 
 type: `Boolean`<br>

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "vue3-draggable-resizable",
-  "version": "1.6.0",
+  "name": "@lzq920/vue3-draggable-resizable",
+  "version": "1.7.0",
   "private": false,
   "description": "[Vue3 Component] 拖拽缩放并具有自动吸附对齐、参考线等功能",
   "scripts": {
@@ -14,33 +14,33 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
-    "@vue/babel-plugin-jsx": "^1.0.0-rc.3",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/babel-plugin-jsx": "^1.0.3",
+    "@vue/cli-plugin-babel": "^4.5.11",
+    "@vue/cli-plugin-eslint": "^4.5.11",
+    "@vue/cli-plugin-router": "^4.5.11",
+    "@vue/cli-plugin-typescript": "^4.5.11",
+    "@vue/cli-plugin-vuex": "^4.5.11",
+    "@vue/cli-service": "^4.5.11",
+    "@vue/compiler-sfc": "^3.0.6",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "babel-plugin-import": "^1.13.1",
+    "babel-plugin-import": "^1.13.3",
+    "core-js": "^3.9.1",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0-0",
-    "less": "^3.0.4",
+    "eslint-plugin-vue": "^7.6.0",
+    "less": "^3.13.1",
     "less-loader": "^5.0.0",
-    "typescript": "~3.9.3",
-    "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "typescript": "^3.9.9",
+    "vue": "^3.0.6"
   },
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/a7650/vue3-draggable-resizable.git"
+    "url": "git+https://github.com/lzq920/vue3-draggable-resizable.git"
   },
   "bugs": {
-    "url": "https://github.com/a7650/vue3-draggable-resizable/issues"
+    "url": "https://github.com/lzq920/vue3-draggable-resizable/issues"
   },
-  "homepage": "https://github.com/a7650/vue3-draggable-resizable",
+  "homepage": "https://github.com/lzq920/vue3-draggable-resizable",
   "keywords": [
     "vue3",
     "component",

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({
 </script>
 <style lang="less" scoped>
 .parent {
-  width: 300px;
+  width: 100%;
   height: 300px;
-  // position: absolute;
-  // top: 100px;
-  // left: 200px;
   position: relative;
   border: 1px solid #000;
   user-select: none;

src/components/Vue3DraggableResizable.ts

@@ -1,21 +1,15 @@
-import { defineComponent, ref, toRef, h, Ref, inject } from 'vue'
+import {defineComponent, h, inject, Ref, ref, toRef} from 'vue'
 import {
   initDraggableContainer,
-  watchProps,
-  initState,
-  initParent,
   initLimitSizeAndMethods,
-  initResizeHandle
+  initParent,
+  initResizeHandle,
+  initState,
+  watchProps
 } from './hooks'
 import './index.css'
-import { getElSize, filterHandles, IDENTITY } from './utils'
-import {
-  UpdatePosition,
-  GetPositionStore,
-  ResizingHandle,
-  ContainerProvider,
-  SetMatchedLine
-} from './types'
+import {filterHandles, getElSize, IDENTITY} from './utils'
+import {ContainerProvider, GetPositionStore, ResizingHandle, SetMatchedLine, UpdatePosition} from './types'
 
 export const ALL_HANDLES: ResizingHandle[] = [
   'tl',
@@ -127,6 +121,10 @@ const VdrProps = {
   lockAspectRatio: {
     type: Boolean,
     default: false
+  },
+  preventDeactivated: {
+    type: Boolean,
+    default: false,
   }
 }
 

src/components/hooks.ts

@@ -1,18 +1,6 @@
-import { onMounted, onUnmounted, ref, watch, Ref, computed } from 'vue'
-import {
-  getElSize,
-  filterHandles,
-  getId,
-  getReferenceLineMap,
-  addEvent,
-  removeEvent
-} from './utils'
-import {
-  ContainerProvider,
-  MatchedLine,
-  ReferenceLineMap,
-  ResizingHandle
-} from './types'
+import {computed, onMounted, onUnmounted, Ref, ref, watch} from 'vue'
+import {addEvent, filterHandles, getElSize, getId, getReferenceLineMap, removeEvent} from './utils'
+import {ContainerProvider, MatchedLine, ReferenceLineMap, ResizingHandle} from './types'
 
 type HandleEvent = MouseEvent | TouchEvent
 
@@ -38,13 +26,14 @@ export function initState(props: any, emit: any) {
   const [resizingMaxHeight, setResizingMaxHeight] = useState<number>(Infinity)
   const [resizingMinWidth, setResizingMinWidth] = useState<number>(props.minW)
   const [resizingMinHeight, setResizingMinHeight] = useState<number>(props.minH)
+  const [preventDeactivated, setPreventDeactivated] = useState<boolean>(props.preventDeactivated)
   const aspectRatio = computed(() => height.value / width.value)
   watch(
-    width,
-    (newVal) => {
-      emit('update:w', newVal)
-    },
-    { immediate: true }
+      width,
+      (newVal) => {
+        emit('update:w', newVal)
+      },
+      {immediate: true}
   )
   watch(
     height,
@@ -88,6 +77,7 @@ export function initState(props: any, emit: any) {
     resizingMinWidth,
     resizingMinHeight,
     aspectRatio,
+    preventDeactivated,
     setEnable,
     setDragging,
     setResizing,
@@ -96,22 +86,49 @@ 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))
+    setPreventDeactivated,
+    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))
   }
 }
 
+
 export function initParent(containerRef: Ref<HTMLElement | undefined>) {
+  ;(function () {
+    const throttle = function (type:string, name:string, obj:any) {
+      obj = obj || window;
+      let running = false;
+      const func = function () {
+        if (running) {
+          return;
+        }
+        running = true;
+        requestAnimationFrame(function () {
+          obj.dispatchEvent(new CustomEvent(name));
+          running = false;
+        });
+      };
+      obj.addEventListener(type, func);
+    };
+    throttle("resize", "optimizedResize",window)
+  })();
   const parentWidth = ref(0)
   const parentHeight = ref(0)
-  onMounted(() => {
+  const computedParent = () => {
     if (containerRef.value && containerRef.value.parentElement) {
-      const { width, height } = getElSize(containerRef.value.parentElement)
+      const {width, height} = getElSize(containerRef.value.parentElement)
       parentWidth.value = width
       parentHeight.value = height
     }
+  }
+  onMounted(() => {
+    computedParent();
+    window.addEventListener("optimizedResize", computedParent);
+  })
+  onUnmounted(() => {
+    window.removeEventListener("optimizedResize", computedParent)
   })
   return {
     parentWidth,
@@ -134,7 +151,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 +192,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 +203,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 +214,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 +225,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)
@@ -243,14 +260,14 @@ export function initDraggableContainer(
   containerProvider: ContainerProvider | null,
   parentSize: ReturnType<typeof initParent>
 ) {
-  const { left: x, top: y, width: w, height: h, dragging, id } = containerProps
+  const {left: x, top: y, width: w, height: h, dragging, id, preventDeactivated} = containerProps
   const {
     setDragging,
     setEnable,
     setResizing,
     setResizingHandle
   } = containerProps
-  const { setTop, setLeft } = limitProps
+  const {setTop, setLeft} = limitProps
   let lstX = 0
   let lstY = 0
   let lstPageX = 0
@@ -260,7 +277,9 @@ export function initDraggableContainer(
   const _unselect = (e: HandleEvent) => {
     const target = e.target
     if (!containerRef.value?.contains(<Node>target)) {
-      setEnable(false)
+      if (!preventDeactivated.value) {
+        setEnable(false)
+      }
       setDragging(false)
       setResizing(false)
       setResizingHandle('')

src/index.js

@@ -1,19 +1,19 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+const __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
 exports.__esModule = true;
-var Vue3DraggableResizable_1 = require("./components/Vue3DraggableResizable");
-var DraggableContainer_1 = require("./components/DraggableContainer");
+const Vue3DraggableResizable_1 = require("./components/Vue3DraggableResizable");
+const DraggableContainer_1 = require("./components/DraggableContainer");
 Vue3DraggableResizable_1["default"].install = function (app) {
     app.component(Vue3DraggableResizable_1["default"].name, Vue3DraggableResizable_1["default"]);
     app.component(DraggableContainer_1["default"].name, DraggableContainer_1["default"]);
     return app;
 };
-var DraggableContainer_2 = require("./components/DraggableContainer");
+const DraggableContainer_2 = require("./components/DraggableContainer");
 __createBinding(exports, DraggableContainer_2, "default", "DraggableContainer");
 exports["default"] = Vue3DraggableResizable_1["default"];