简单实现vue3（ts版本） 拖动改变元素宽高

直接上组件代码

<template>
  <div class="drag" @mousedown="onTdMousedown($event)"></div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
// 目标元素
const props = defineProps<{
  target: HTMLElement;
}>();

const domInfo = reactive({
  beaseW: 0,
  beaseH: 0,
});

const updateTarget = (event: MouseEvent) => {
  if (!props.target) {
    console.error('drag--- 请传入一个HTMLElement节点');
    return;
  }
  domInfo.beaseW = props.target.clientWidth;
  domInfo.beaseH = props.target.clientHeight;
  props.target!.style.width = `${domInfo.beaseW + event.movementX}px`;
  props.target!.style.height = `${domInfo.beaseH + event.movementY}px`;
};
// change 回调方式
const emits = defineEmits(['change']);
const onTdMousedown = (e: MouseEvent) => {
  window.addEventListener('mousemove', updateTarget);
  window.onmouseup = function () {
    window.onmouseup = null;
    emits('change');
    window.removeEventListener('mousemove', updateTarget);
  };
};
</script>

<style lang="less" scoped>
.drag {
  position: absolute;
  width: 16px;
  height: 16px;
  bottom: 10px;
  // background: red;
  right: 10px;
  z-index: 999;
  border-radius: inherit;
  box-shadow: 2px 2px 0px -1px red;
  cursor: move;
}
</style>

调用方式
引入文件

<script setup lang="ts">
import dragVue from './drag.vue';

</script>

    <dragVue :target="ref_target" @change="onChange"></dragVue>