Vue 可拉伸线实现：使用 CSS resize 属性

<template>
  <div class='resizeable-line' @mousedown='startResize'></div>
</template>
<script>
export default {
  methods: {
    startResize(event) {
      event.preventDefault();

      const line = event.target;
      const startPosition = event.clientY;

      const onMouseMove = (event) => {
        const currentPosition = event.clientY;
        const offset = currentPosition - startPosition;

        line.style.height = `${line.offsetHeight + offset}px`;
      };

      const onMouseUp = () => {
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      };

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    }
  }
};
</script>
<style>
.resizeable-line {
  width: 100%;
  height: 5px;
  background-color: gray;
  cursor: ns-resize;
  resize: vertical;
}
</style>
<p>在上述代码中，我们创建了一个带有 'resizeable-line' 类的 <div> 元素，通过 CSS 设置它的样式，包括高度、背景颜色、光标样式和 resize 属性。</p>
<p>然后，在 startResize 方法中，我们监听 mousedown 事件，当鼠标按下时，记录当前的鼠标位置作为起始位置。</p>
<p>接着，我们添加 mousemove 和 mouseup 事件监听器，分别在鼠标移动和鼠标抬起时触发相应的处理函数。在 mousemove 事件处理函数中，我们计算鼠标移动的距离，并将其添加到线的高度上，实现拉伸效果。</p>
<p>最后，当鼠标抬起时，我们移除 mousemove 和 mouseup 事件监听器，停止拉伸。</p>