-
- onResizeMouseMove(evt, flags.up_flag)"
- @mouseleave="onMouseLeave"
- @mouseup="onMouseLeave"
- >
- onResizeMouseMove(evt, flags.down_flag)"
- @mouseleave="onMouseLeave"
- @mouseup="onMouseLeave"
- >
- onResizeMouseMove(evt, flags.left_flag)"
- @mouseleave="onMouseLeave"
- @mouseup="onMouseLeave"
- >
- onResizeMouseMove(evt, flags.right_flag)"
- @mouseleave="onMouseLeave"
- @mouseup="onMouseLeave"
- >
- onResizeMouseMove(evt, flags.up_flag | flags.left_flag)
- "
- @mouseleave="onMouseLeave"
- @mouseup="onMouseLeave"
- >
- onResizeMouseMove(evt, flags.up_flag | flags.right_flag)
- "
- @mouseleave="onMouseLeave"
- @mouseup="onMouseLeave"
- >
- onResizeMouseMove(evt, flags.down_flag | flags.left_flag)
- "
- @mouseleave="onMouseLeave"
- @mouseup="onMouseLeave"
- >
- onResizeMouseMove(evt, flags.down_flag | flags.right_flag)
- "
- @mouseleave="onMouseLeave"
- @mouseup="onMouseLeave"
- >
@@ -261,81 +180,6 @@
.top {
z-index: 1;
}
-
-.resize_div {
- background: gray;
- width: 32px;
- height: 32px;
- z-index: 999;
-}
-
-.absolute_up {
- position: absolute;
- top: -16px;
- left: calc(50% - 16px);
-}
-
-.absolute_down {
- position: absolute;
- bottom: -16px;
- left: calc(50% - 16px);
-}
-
-div.absolute_up,
-div.absolute_down {
- cursor: s-resize;
-}
-
-.absolute_left {
- position: absolute;
- top: calc(50% - 16px);
- left: -16px;
-}
-
-.absolute_right {
- position: absolute;
- top: calc(50% - 16px);
- right: -16px;
-}
-
-div.absolute_left,
-div.absolute_right {
- cursor: w-resize;
-}
-
-.absolute_left_up {
- position: absolute;
- top: -16px;
- left: -16px;
-}
-
-.absolute_left_down {
- position: absolute;
- bottom: -16px;
- left: -16px;
-}
-
-.absolute_right_up {
- position: absolute;
- top: -16px;
- right: -16px;
-}
-
-.absolute_right_down {
- position: absolute;
- bottom: -16px;
- right: -16px;
-}
-
-div.absolute_left_up,
-div.absolute_right_down {
- cursor: se-resize;
-}
-
-div.absolute_right_up,
-div.absolute_left_down {
- cursor: ne-resize;
-}
diff --git a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/active.ts b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/active.ts
new file mode 100644
index 0000000..e9ad2d4
--- /dev/null
+++ b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/active.ts
@@ -0,0 +1,19 @@
+import { watch } from 'vue';
+function active(props: any, emit: Function) {
+ // 监听是否激活
+ watch(() => {
+ return props.isActive
+ },
+ (n) => {
+ if(n){
+ emit('activated',{
+
+ })
+ }else{
+ emit('deactivated',{
+
+ })
+ }
+ })
+}
+export default active
\ No newline at end of file
diff --git a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag.ts b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag.ts
new file mode 100644
index 0000000..c6a8b8f
--- /dev/null
+++ b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag.ts
@@ -0,0 +1,66 @@
+import { ref, reactive } from "vue";
+import { styleIf } from "../../../types/style";
+// 外层元素点击拖拽
+const itemDrag = (
+ ev: any,
+ emit: Function,
+ props: any,
+ style: any,
+ moveing: any
+): void => {
+ let press_x = ev.clientX;
+ let press_y = ev.clientY;
+ let target: any = ev.target || ev.srcElement;
+ ev.stopPropagation();
+ ev.preventDefault();
+
+ emit("downHandler", {
+ // 点击元素事件回调
+ el: target,
+ e: ev,
+ });
+ if (!props.isDraggable) return;
+ //鼠标按下并移动的事件
+ document.onmousemove = (e: any) => {
+ if (e.movementX || e.movementY) {
+ moveing.value = true;
+
+ let offset_left = press_x - e.clientX;
+ let offset_top = press_y - e.clientY;
+ press_x = e.clientX;
+ press_y = e.clientY;
+
+ //绑定元素位置到positionX和positionY上面
+
+ //移动当前元素
+ style.top -= offset_top;
+ style.left -= offset_left;
+ emit("moveHandler", {
+ // 移动事件回调
+ el: target,
+ e,
+ top: style.top,
+ left: style.left,
+ });
+ }
+ };
+ document.onmouseup = (e: any) => {
+ moveing.value = false;
+ if (style.left == style.back_left && style.top == style.back_top) {
+ style.left = style.back_left;
+ style.top = style.back_top;
+ } else {
+ emit("moveEndHandler", {
+ // 抬起事件回调
+ el: target,
+ e,
+ top: style.top,
+ left: style.left,
+ });
+ }
+
+ document.onmousemove = null;
+ document.onmouseup = null;
+ };
+};
+export default itemDrag;
diff --git a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/props.ts b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/props.ts
new file mode 100644
index 0000000..9751f60
--- /dev/null
+++ b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/props.ts
@@ -0,0 +1,106 @@
+const props = {
+ x: {
+ type: Number,
+ default: () => {
+ return 0;
+ },
+ },
+ y: {
+ type: Number,
+ default: () => {
+ return 0;
+ },
+ },
+ zIndex: {
+ type: Number,
+ default: () => {
+ return 0;
+ },
+ },
+ w: {
+ type: Number,
+ default: () => {
+ return 100;
+ },
+ },
+ h: {
+ type: Number,
+ default: () => {
+ return 100;
+ },
+ },
+ isActive: {
+ type: Boolean,
+ default: () => {
+ return false;
+ },
+ },
+ isDraggable: {
+ type: Boolean,
+ default: () => {
+ return true;
+ },
+ },
+ isResizable: {
+ type: Boolean,
+ default: () => {
+ return true;
+ },
+ },
+ isGuide: {
+ type: Boolean,
+ default: () => {
+ return false;
+ },
+ },
+ guideStyle: {
+ type: Object,
+ default: () => {
+ return {};
+ },
+ },
+ resizeIconSize: {
+ type: Number,
+ default: () => {
+ return 8;
+ },
+ },
+ isRotate: {
+ type: Boolean,
+ default: () => {
+ return false;
+ },
+ },
+ rotate: {
+ type: Number,
+ default: () => {
+ return 0;
+ },
+ },
+ limitTop: {
+ type: Number,
+ default: () => {
+ return -1;
+ },
+ },
+ limitLeft: {
+ type: Number,
+ default: () => {
+ return -1;
+ },
+ },
+ limitBottom: {
+ type: Number,
+ default: () => {
+ return -1;
+ },
+ },
+ limitRight: {
+ type: Number,
+ default: () => {
+ return -1;
+ },
+ },
+};
+
+export default props;
diff --git a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/renderData.ts b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/renderData.ts
new file mode 100644
index 0000000..d506ffc
--- /dev/null
+++ b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/renderData.ts
@@ -0,0 +1,146 @@
+import { computed, reactive, ref } from "vue";
+import { styleIf } from "../../../types/style";
+function render(props: any) {
+ // 外层元素定位style
+ const style = reactive