vue实现边框线拖拽效果(拖动元素边框改变宽度)

1.封装组件

实现的效果:

vue实现边框线拖拽效果(拖动元素边框改变宽度)_第1张图片

自定义组件代码





2.使用步骤

a.引入并注册组件


b.代码指定位置增加以下代码(左侧收起)




当需要右侧收起和展开时:

调换两处 :style的绑定值;widthChange()方法中的this.width -= movement改为this.width += movement



3.0拓展

为实现收起/展开的动画效果,建议将需要收起/展开的部分用transition包起来,并在对应的样式中增加自己想要的动画效果

例如:





你可能感兴趣的:(Vue,工作,vue)