touch事件实现拖动分隔线改变上下div高度

效果

html结构

<div class="root">
        <div id="head">
            <div class="top"></div>
            <div class="line"
                 @touchstart="touchstart"
                 @touchmove="touchmove"
                 @touchend="touchend"
            ></div>
        </div>
        <div class="bottom"></div>
    </div>

css

.root{
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        display: flex;
        flex-direction: column;
    }
    #head {
        height: 50px;
        width: 100%;
        display: flex;
        flex-direction: column