wangeditor v4版本，基于vue3项目，实现动态拉伸编辑区大小

搜了一圈，没有找到合适的答案，自己研究写了一个，思路对了，写起来就比较简单

直接上代码，index.vue

<template>
  <div style="position: relative">
    <Editor
      ref="targetRef"
      v-bind="$attrs"
      :style="editorStyle"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
    <span ref="resizeRef" class="is-resize"> icon占位 </span>
  </div>
</template>
<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, shallowRef, computed, ref, CSSProperties } from "vue";
import { IDomEditor } from "@wangeditor/editor";
import { Editor } from "@wangeditor/editor-for-vue";
import { useResize } from "./use-resize";

const props = defineProps(["resize", "editorHeight"]);
const editorHeight = computed(() => `${props.editorHeight}px`);
const editorRef = shallowRef<IDomEditor>();
const targetRef = ref<HTMLElement>();
const resizeRef = ref<HTMLElement>();
const resize = computed(() => props.resize);
useResize(targetRef, resizeRef, resize);
const editorStyle = ref<CSSProperties>({ height: editorHeight.value });

// 编辑器创建完毕时的回调函数。
const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
// 编辑器内容、选区变化时的回调函数。
const handleChange = (editor: IDomEditor) => {
  if (targetRef.value && resize.value) {
    editorStyle.value = { height: targetRef.value.box.style.height };
  }
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>

<style lang="scss">
.is-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: ns-resize;
  user-select: none;
}
</style>

use-resize.ts

import { onBeforeUnmount, onMounted, watchEffect } from "vue";
import type { ComputedRef, Ref } from "vue";

export const useResize = (
  targetRef: Ref<HTMLElement | undefined>,
  resizeRef: Ref<HTMLElement | undefined>,
  resize: ComputedRef<boolean>
) => {
  const minHeight = 260;

  const onMousedown = (e: MouseEvent) => {
    const downY = e.clientY;
    const targetRect = targetRef.value!.box.getBoundingClientRect();
    const targetTop = targetRect.top;
    const targetHeight = targetRect.height;
    const clientHeight = document.documentElement.clientHeight;

    const maxHeight = -targetTop + clientHeight;

    const onMousemove = (e: MouseEvent) => {
      // console.log('onMousemove')

      e.preventDefault();

      const height = Math.min(
        Math.max(e.clientY - downY + targetHeight, minHeight),
        maxHeight
      );

      targetRef.value!.box.style.height = height + "px";
    };

    const onMouseup = () => {
      document.removeEventListener("mousemove", onMousemove);
      document.removeEventListener("mouseup", onMouseup);
    };

    document.addEventListener("mousemove", onMousemove);
    document.addEventListener("mouseup", onMouseup);
  };

  const onResize = () => {
    if (resizeRef.value && targetRef.value) {
      resizeRef.value.addEventListener("mousedown", onMousedown);
    }
  };

  const offResize = () => {
    if (resizeRef.value && targetRef.value) {
      resizeRef.value.removeEventListener("mousedown", onMousedown);
    }
  };

  onMounted(() => {
    watchEffect(() => {
      if (resize.value) {
        onResize();
      } else {
        offResize();
      }
    });
  });

  onBeforeUnmount(() => {
    offResize();
  });
};