vue实现拖拽拉伸容器宽度

效果
vue实现拖拽拉伸容器宽度_第1张图片

实现逻辑

  • 监听鼠标按下事件,设置滑条背景色,left距离,记录初始位置,捕获鼠标
  • 监听鼠标拖动事件,获取移动的距离,设置左侧区域与右侧区域的宽度,滑条的left值
  • 监听鼠标松开事件,取消事件监听,恢复滑条背景色,释放鼠标

代码









你可能感兴趣的:(vue,vue.js,前端,javascript)