<div id="middle" ref="middle" @mousedown="dragMousedown"></div>
#middle{
width: 5px;
height: 100%;
background-color: #d6d6d6;
margin-top: -40px;
position: absolute;
left: 357px;
}
#middle:hover{
cursor: col-resize;
}
dragMousedown (e) {
const middle = this.$refs.middle
const myInfo = this.$refs.myInfo.$el
//颜色改变提醒
middle.style.background = '#818181';
const startX = e.clientX;
middle.left = middle.offsetLeft;
// 鼠标拖动事件
document.onmousemove = (e) => {
const endX = e.clientX;
let moveLen = middle.left + (endX - startX);
if (moveLen <= 350) moveLen = 350;
if (moveLen > 1350) moveLen = 1350;
middle.style.left = moveLen + 7 + "px";
myInfo.style.width = moveLen + "px";
};
// 鼠标松开事件
document.onmouseup = () => {
//颜色恢复
middle.style.background = '#d6d6d6';
document.onmousemove = null;
document.onmouseup = null;
middle.releaseCapture && middle.releaseCapture();
};
middle.setCapture && middle.setCapture();
return false;
},
标签：拉伸,style,vue,const,边框,middle,moveLen,document,left From： https://www.cnblogs.com/guo-siqi/p/17130958.html