From 32f6418999c6065df09bbcd5838017d909a3a864 Mon Sep 17 00:00:00 2001
From: Oliver <1069035666@qq.com>
Date: Thu, 31 Mar 2022 06:11:53 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E6=8B=96=E6=8B=BD=20=E6=94=B9=E5=8F=98?=
 =?UTF-8?q?=E8=BE=B9=E6=A1=86=E5=A4=A7=E5=B0=8F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Resizer/index.ts        |  4 ++
 src/components/Resizer/src/Resizer.vue | 87 ++++++++++++++++++++++++++
 2 files changed, 91 insertions(+)
 create mode 100644 src/components/Resizer/index.ts
 create mode 100644 src/components/Resizer/src/Resizer.vue

diff --git a/src/components/Resizer/index.ts b/src/components/Resizer/index.ts
new file mode 100644
index 0000000..b533e0d
--- /dev/null
+++ b/src/components/Resizer/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils/index';
+import resizer from './src/Resizer.vue';
+
+export const Resizer = withInstall(resizer);
diff --git a/src/components/Resizer/src/Resizer.vue b/src/components/Resizer/src/Resizer.vue
new file mode 100644
index 0000000..acfce81
--- /dev/null
+++ b/src/components/Resizer/src/Resizer.vue
@@ -0,0 +1,87 @@
+<template>
+  <div @mousedown="onMouseDown" class="resizer" :style="getWrapStyleRef">
+    <span class="resizer-content" @dblclick="onDbClick">
+      <slot v-if="$slots.default"></slot>
+      <span v-else>
+        <CaretUpOutlined v-if="props.type === 'horizontal'" />
+        <CaretRightOutlined v-else />
+      </span>
+    </span>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed, ref } from 'vue';
+  import { CaretUpOutlined, CaretRightOutlined } from '@ant-design/icons-vue';
+  export default defineComponent({
+    name: 'Resizer',
+    components: {
+      CaretUpOutlined,
+      CaretRightOutlined,
+    },
+    props: {
+      type: {
+        type: String as PropType<'horizontal' | 'vertical'>,
+        default: 'horizontal',
+      },
+    },
+    emits: ['move', 'db-click'],
+    setup(props, { emit }) {
+      const lastX = ref<number>(0);
+      const lastY = ref<number>(0);
+
+      const getWrapStyleRef = computed(() => {
+        if (props.type === 'horizontal') {
+          return { width: '100%', cursor: 's-resize' };
+        } else {
+          return { height: '100%', cursor: 'w-resize' };
+        }
+      });
+
+      document.addEventListener('mouseup', onMouseUp);
+
+      function onMouseDown(event) {
+        lastX.value = event.screenX;
+        lastY.value = event.screenY;
+        document.addEventListener('mousemove', onMouseMove);
+      }
+
+      function onMouseMove(event) {
+        emit('move', event, lastX.value - event.screenX, lastY.value - event.screenY);
+        lastX.value = event.screenX;
+        lastY.value = event.screenY;
+      }
+
+      function onMouseUp() {
+        document.removeEventListener('mousemove', onMouseMove);
+        lastX.value = 0;
+        lastY.value = 0;
+      }
+
+      function onDbClick(event) {
+        emit('db-click', event);
+      }
+
+      return { getWrapStyleRef, props, onMouseDown, onDbClick };
+    },
+  });
+</script>
+
+<style lang="less">
+  .resizer {
+    z-index: 999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .resizer-content {
+      padding: 1px;
+      font-size: 10px;
+      cursor: pointer;
+      color: @text-color-secondary;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+      -khtml-user-select: none;
+      user-select: none;
+    }
+  }
+</style>
-- 
Gitee


From 37c9fcecdab39419558b2261c572b576e39c462c Mon Sep 17 00:00:00 2001
From: Oliver <1069035666@qq.com>
Date: Thu, 31 Mar 2022 06:22:34 +0000
Subject: [PATCH 2/2] useEventListener

---
 src/components/Resizer/src/Resizer.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Resizer/src/Resizer.vue b/src/components/Resizer/src/Resizer.vue
index acfce81..26ae69f 100644
--- a/src/components/Resizer/src/Resizer.vue
+++ b/src/components/Resizer/src/Resizer.vue
@@ -12,6 +12,7 @@
 <script lang="ts">
   import { defineComponent, computed, ref } from 'vue';
   import { CaretUpOutlined, CaretRightOutlined } from '@ant-design/icons-vue';
+  import { useEventListener } from '/@/hooks/event/useEventListener';
   export default defineComponent({
     name: 'Resizer',
     components: {
@@ -37,7 +38,12 @@
         }
       });
 
-      document.addEventListener('mouseup', onMouseUp);
+      useEventListener({
+        el: document,
+        name: 'mouseup',
+        listener: onMouseUp,
+        wait: 0,
+      });
 
       function onMouseDown(event) {
         lastX.value = event.screenX;
-- 
Gitee