vue的边距怎么设置_vue 拖动调整左右两侧div的宽度

原文是左中右三种情况的拖动。由于项目需要，我删除掉了右边的，直接左右区域拖动调整div宽度

1、拖动，调整左右两侧宽度

• 西瓜
• 备注2

• 西瓜
• 备注2

export default {

name: 'Dashboard',

mounted () {

this.dragControllerDiv();

},

methods: {

dragControllerDiv: function () {

var resize = document.getElementsByClassName('resize');

var left = document.getElementsByClassName('left');

var mid = document.getElementsByClassName('mid');

var box = document.getElementsByClassName('box');

for (let i = 0; i < resize.length; i++) {

// 鼠标按下事件

resize[i].onmousedown = function (e) {

var startX = e.clientX;

resize[i].left = resize[i].offsetLeft;

// 鼠标拖动事件

document.onmousemove = function (e) {

var endX = e.clientX;

var moveLen = resize[i].left + (endX - startX); // (endx-startx)=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度

var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

if (moveLen < 150) moveLen = 150; // 左边区域的最小宽度为150px

if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

resize[i].style.left = moveLen; // 设置左侧区域的宽度

for (let j = 0; j < left.length; j++) {

left[j].style.width = moveLen + 'px';

mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';

}

}

// 鼠标松开事件

document.onmouseup = function (evt) {

document.onmousemove = null;

document.onmouseup = null;

resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉

}

resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获

return false;

}

}

}

}

}

ul,li{

list-style: none;

display: block;

margin:0;

padding:0;

}

.box{

width:100%;

height: 48%;

margin: 1% 0px;

overflow:hidden;

}

.left{

width:calc(30% - 10px);

height:100%;

background:#c9c9c9;

float:left;

}

.resize{

width:5px;

height:100%;

cursor: w-resize;

float:left;

}

.mid{

float:left;

width:70%;

height:100%;

background:#f3f3f3;

}