拖拽改变div大小实现

在块底部增加div

        <section ref="topTableWrap" class="top-table-wrapper">

            <new-stock-info-table ref="newStockInfoTable" :filter-field="filterField" component="confirm-offer" @onRowClick="onRowClick($event)"></new-stock-info-table>

            <div ref="dragLine" class="drag-line"></div>

        </section>

样式：

            .drag-line {

                position: absolute;

                width: 100%;

                border-bottom: 2px solid #c8c7c7;

                &:hover {

                    cursor: n-resize;

                    border-bottom: 3px solid #bfbfbf;

                }

            }

在data里定义变量：

    isMouseDown = false;

    mouseDownY = 0;

生命周期mounted里：”

    mounted() {

        (<any>this.$refs.dragLine).onmousedown = e => {

            this.mouseDownY = e.pageY;

            this.isMouseDown = true;

        };

        document.onmouseup = () => {

            this.isMouseDown = false;

        };

        document.onclick = () => {

            this.isMouseDown = false;

        };

        document.onmousemove = e => {

            e.preventDefault();

            let moveY = this.mouseDownY - e.pageY;

            this.mouseDownY = e.pageY;

            if (this.isMouseDown) {

                (<any>this.$refs.topTableWrap).style.height = (<any>this.$refs.topTableWrap).offsetHeight - moveY + 'px';

            }

        };

    }