<template>
  <div class="box" draggable="true">
    <div>111111</div>
  </div>
</template>

<script>



  export default {
    name: 'index',
    components: {
    },
    data() {
      return{}
    },
    mounted() {
      document.querySelectorAll('.box').forEach(function(box) {
        let dragging = false;
        let currentX;
        let currentWidth;
        let minWidth = 5; // 设置最小宽度

        const east = document.createElement('div');
        east.classList.add('east');
        box.appendChild(east);

        east.addEventListener('mousedown', function(e) {
          dragging = true;
          currentX = e.clientX;
          currentWidth = box.offsetWidth;
        });

        document.addEventListener('mouseup', function() {
          dragging = false;
        });

        document.addEventListener('mousemove', function(e) {
          if (dragging) {
            const diffX = e.clientX - currentX;
            const newWidth = currentWidth + diffX;
            if (newWidth >= minWidth) {
              box.style.width = newWidth + 'px';
            }
          }
        });
      });
    }
  }
</script>

<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  cursor: pointer;
}

.east {
  position: absolute;
  width: 10px;
  height: 100%;
  right: 0;
  top: 0;
  cursor: e-resize;
}

</style>
