VueDragResize踩雷事件

组件的基本使用

certContentList使用ref定义的数据，很坑的是 ，当响应数据变化之后，w和h不按照设置的宽和高显示，试了好多种方法，最后 再添加动态的style才能保证宽和高正确显示

<VueDragResize
            v-for="(item, index) in topBoxContnt"
            :key="index"
            :isActive="true"
            :w="item.w"
            :h="item.h"
            :x="item.x"
            :y="item.y"
            :z="item.z"
            @resizing="handleResize('topBox', $event, index)"
            @dragging="handleResize('topBox', $event, index)"
            :parentLimitation="true"
          >
            <div class="topBox">
              <div class="absTop" style="position: relative">
                <div
                  class="dragableHandle"
                  contenteditable="true"
                  :style="getTextStyle(index)"
                  @input="handleInput(index)"
                  @contextmenu.prevent="
                    showContextMenu($event, 'topBox', index)
                  "
                >
                  <span
                    v-for="(___item, ___index) in extractDataFromCurlyBraces(
                      item.content
                    )"
                    :style="getSpanTextStyle(index, ___index, ___item)"
                    >{{ ___item }}</span
                  >
                  <!-- {{ item.content }} -->
                </div>
                <ul
                  :style="{
                    top: '30px',
                    left: '20px',
                    position: 'absolute',
                    zIndex: 999,
                  }"
                  class="context-menu-text"
                  v-if="istopoxMenuVisible[index]"
                >
                  <li
                    v-for="(_item, _index) in mergeLists(
                      textFormatList,
                      extractDataFromCurlyBraces(item.content)
                    )"
                    :key="_index"
                    @click="handleTextEvent(_index, 'text', index)"
                  >
                    {{ _item }}
                  </li>
                </ul>
              </div>
            </div>
          </VueDragResize>

这个vuedrag拖拽组件里面有一个ul是设置的一个设置 的下拉框，可以设置此组件的宽和高，

 ImgContent.value.forEach((item, index) => {
      if (_isImgMenuVisible.value[index]) {
        ImgContent.value[index] = { ...ImgSettingContent };
        // return ;
      }
    });

上面代码ImgSettingContent设置宽和高， console.log(ImgContent.value, ImgContent.value[index], 6666665555555555);我后者打印的是 我设置的值，但是前者的值 却不是理想的值，找了好久原因，发现是自己设置完宽和高之后，他会触发handleresize函数。代码如下

const handleResize = (boxName, event, index) => {
  // 处理调整大小和拖动事件
  if (boxName === 'topBox') {
    topBoxContnt.value[index].w = event.width;
    topBoxContnt.value[index].h = event.height;
    topBoxContnt.value[index].x = event.left;
    topBoxContnt.value[index].y = event.top;
  }
  if (boxName === 'certContent') {
    if (setCertFlag.value) {
      return;
    }
    console.log(90);
    certContentList.value[index].w = event.width;
    certContentList.value[index].h = event.height;
    certContentList.value[index].x = event.left;
    certContentList.value[index].y = event.top;
  }
  if (boxName === 'qrContent') {
    qrCodeContet.value[index].w = event.width;
    qrCodeContet.value[index].h = event.height;
    qrCodeContet.value[index].x = event.left;
    qrCodeContet.value[index].y = event.top;
  }
  if (boxName === 'imgContent') {
    if (setImgFlag.value) {
      return;
    }

    ImgContent.value[index].w = event.width;
    ImgContent.value[index].h = event.height;

    ImgContent.value[index].x = event.left;
    ImgContent.value[index].y = event.top;
  }
};

但是 event的值的一次只能改变宽或者高，不能同时改变，不知道原因 然后就定义了一个变量值代表是拖拉的还是设置的宽和高，

const handleResizeCert = (boxName, event, index) => {
  if (setCertFlag.value) {
    return;
  }

  handleResize(boxName, event, index);
};

但是得在设置宽和高之后需要用延时把这个flag置为false

const handleSetImg = () => {
  if (isRightClickImg.value) {
    setImgFlag.value = true;
    ImgBoxVisible.value = false;
    ImgContent.value.forEach((item, index) => {
      if (_isImgMenuVisible.value[index]) {
        ImgContent.value[index] = { ...ImgSettingContent };
        // return ;
      }
    });
    setTimeout(() => {
      setImgFlag.value = false;
    }, 2000);
    // const updatedContent = (ImgContent.value || ImgContent.value.value).map(
    //   (item, index) => {
    //     console.log({ ...ImgSettingContent }, 9222222222);
    //     if (_isImgMenuVisible.value[index]) {
    //       setImgIndex.value = index;
    //       _isImgMenuVisible.value[index] = false;
    //       return {
    //         ...ImgSettingContent,
    //         // w: Number(ImgSettingContent.w),
    //         // h: Number(ImgSettingContent.h),
    //       };
    //     }
    //     return item;
    //   }
    // );
    // ImgContent.value = updatedContent;
    // for (let index = 0; index < ImgContent.value.length; index++) {
    //   ImgContent.value[index] = JSON.parse(JSON.stringify(updatedContent))[
    //     index
    //   ];
    //   console.log(ImgContent.value, ImgContent.value[index], 6666665555555555);
    // }

    // console.log(JSON.parse(JSON.stringify(updatedContent)), 777777777);
    // ImgContent.value = JSON.parse(JSON.stringify(updatedContent)); // ✅ 强制更新数组

    // ImgContent.value = ImgContent.value.map((item, index) => {
    //   if (_isImgMenuVisible.value[index]) {
    //     const newWidth = Number(ImgSettingContent.w);
    //     const newHeight = Number(ImgSettingContent.h);
    //     const { w, h } = ImgSettingContent;
    //     if (!isNaN(newWidth) && !isNaN(newHeight)) {
    //       _isImgMenuVisible.value[index] = false;

    //       return {
    //         ...item,
    //         w: w,
    //         h: h,
    //       };
    //     }
    //   }
    //   _isImgMenuVisible.value[index] = false;
    //   return item;
    // });
  } else {
    ImgContent.value.push({
      w: Number(ImgSettingContent.w),
      h: Number(ImgSettingContent.h),
      x: Number(ImgSettingContent.x),
      y: Number(ImgSettingContent.y),
      z: 4,
    });
    ImgBoxVisible.value = false;
  }
};

***注释了那么多也是试了好多方法，为什么值改不过来！！！