vue如何实现垂直方向拖拽容器改变高度

1.定义一个指令方法：

Vue.directive('drag-log', {
    bind(el, binding) {
        const dragbar = el.querySelector('.dragbar')
        dragbar.onmousedown = (e) => {
            if (e.target.classList.contains('header')) return;
            // if (!e.altKey) return;

            // 鼠标按下，计算当前元素距离可视区的距离
            const bd = el.querySelector('.body'),
                cursorBasePointY = e.clientY,
                logBasePointY = (bd.style.height && Number(bd.style.height.split('p')[0])) || bd.offsetTop;

            bd.style.setProperty('cursor', 'n-resize');

            document.onmousemove = function (e) {
                e.preventDefault(); // 移动时禁用默认事件
                // if (!e.ctrlKey) return;

                // 通过事件委托，计算移动的距离
                const l = logBasePointY - (e.clientY - cursorBasePointY);

                bd.style.height = `${l}px`;
            };

            document.onmouseup = function (e) {
                e.stopPropagation();
                e.preventDefault();

                document.onmousemove = null;
                document.onmouseup = null;

                bd.style.setProperty('cursor', null);
            };
        }
    }
});

2.在vue文件使用：

<template>
      <div class="console" v-drag-log>
           <label class="dragbar"></label>
           <div class="wrap"></div>
       </div>
</template>
<style lang="less" scoped >
.console {
    position: relative;
    max-height: 600px;
    .dragbar {
        width: 100%;
        height: 10px;
        position: absolute;
        top: -10px;
        cursor: n-resize;
    }
}
</style>