diff --git a/src/components/Resizer/index.ts b/src/components/Resizer/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b533e0d19a26bd54b902f93bfa112de22e8796f3
--- /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 0000000000000000000000000000000000000000..26ae69f1f4ca00b02f161548a69990ae7b768400
--- /dev/null
+++ b/src/components/Resizer/src/Resizer.vue
@@ -0,0 +1,93 @@
+<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';
+  import { useEventListener } from '/@/hooks/event/useEventListener';
+  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' };
+        }
+      });
+
+      useEventListener({
+        el: document,
+        name: 'mouseup',
+        listener: onMouseUp,
+        wait: 0,
+      });
+
+      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>