vue3+ts vue拖拽

<template>
  <div style="display: flex;">
    <div class="container" ref="container">
      <div class="drag" @mousedown="onTdMousedown($event)"></div>
      <div class="asdddddd">
      </div>
      <div class="sdasd">

      </div>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { reactive, ref } from 'vue';

// 目标元素
const props = defineProps<{
  target: HTMLElement;
}>();

const domInfo = reactive({
  baseW: 0,
  baseH: 0
});

const container = ref<HTMLElement>(null);
const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const updateTarget = (event: MouseEvent) => {
  if (!container.value) {
    console.error('drag--- 请传入一个HTMLElement节点');
    return;
  }
  // movementX/movementY
  // 两个鼠标移动事件间隔时间中当中鼠标移动的相对坐标;]
  console.log('dsfs', domInfo.baseW, '+', event.movementX)
  domInfo.baseW = container.value.clientWidth;
  container.value!.style.width = `${domInfo.baseW + event.movementX}px`;



  // container.value!.style.height = `${domInfo.baseH + event.movementY}px`;
};
// change 回调方式
const onTdMousedown = (e: MouseEvent) => {
  window.addEventListener('mousemove', updateTarget);
  window.onmouseup = function () {
    window.onmouseup = null;
    window.removeEventListener('mousemove', updateTarget);
  };
};
</script>
 
<style lang="less" scoped>
.drag {
  position: absolute;
  width: 10px;
  height: 100px;
  bottom: 10px;
  // background: red;
  right: 0;
  z-index: 999;
  border-radius: inherit;
  background-color: aquamarine;
  cursor: move;
}

.container {
  width: 300px;
  height: 100px;
  // background-color: #ccc;

  position: relative;
  min-width: 300px;
  max-width: 900px;
}

.asdddddd {
  position: absolute;
  right: 20px;
}

.sdasd {
  display: flex;
  flex: 1;
  // background-color: black;
}
</style>