拖动元素边框 改变元素宽度

• vue中 拖动元素边框 改变元素宽度

  先上效果图：

1837051-20200422151530576-1464241975[1].gif

如图所示，通过拖动来改变表单的宽度。
但实际上，这边并不是表单的边框，而是一个单独的组件。通过监听鼠标的down，move以及up事件。我们可以单独的写个组件handle.vue。

监听事件并this.$emit将值传给父组件，父组件通过传过来的值来动态的修改需要改变宽度的元素。
如效果图所示，写一个有需求组件，并引入handle组件

  　　
　　
 // 这里是你自己需要改变宽度的组件
　　

这里将需要改变宽度的元素给一个双向绑定的值，然后通过子组件传来的值修改。再将两个元素弹性布局，相当于hanle组件就会

贴着我们需要拖动的元素，看上去是再拖动我们要改变宽度的元素，其实是在拖动我们的handle。