vue使用全局指令实现左右拖拽调整元素宽度

1.main.js:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

const draggableObj = {
  mounted(el, binding, vnode) {
    let xOffset = 0;
    let yOffset = 0;
    el.style.width = binding.value + 'px';
    const handleMouseDown = (event) => {
      xOffset = event.clientX;
      yOffset = event.clientY;
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    };

    const handleMouseMove = (event) => {
      const currentX = event.clientX;
      const currentY = event.clientY;

      const dx = currentX - xOffset;
      const dy = currentY - yOffset;

      el.style.width = binding.value + dx + 'px';
      \\同理，高度也是一样，修改el.style.height即可
    };

    const handleMouseUp = () => {
      binding.value = el.offsetWidth;
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };

    el.querySelector('.drag-handle').addEventListener('mousedown', handleMouseDown);
  },
}
//v-draggable
app.directive('draggable', draggableObj)

app.mount('#app')

2.使用：

<div v-draggable="data.width">
</div>

<script>
import { ref, reactive } from "vue";
const data = reactive({
    width:400,//表示要拖拽元素的初始宽度
})

</script>

同理，高度也是一样，修改el.style.height即可，这里我的需求不用拖拽高度就没演示