Vue div拖拉高度

vue拖动改变div高度

<template>
    <div>
        <div :style="{height: tableHeight + 'px',width:'100%',background: '#ab1236'}"></div>

        <div id="touchmove"
             style="width: 100%;margin-top:5px;margin-bottom:5px;height: 2px;background: #ababab;cursor: s-resize"></div>

        <div :style="{height: innerHeight-tableHeight +'px',width: '100%',background: '#4c65e6'}"></div>
    </div>
</template>

<script>
    export default {
        name: "Demo",
        data() {
            return {
                innerHeight: window.innerHeight, // 获取窗口高度
                tableHeight: window.innerHeight / 2, // 设置第一个div的高度为窗口高度的一半
            }
        },
        mounted() {
            document.getElementById("touchmove").onmousedown = this.textWidthChange;
        },

        methods: {
            // 当鼠标向上向下拖动时触发该方法
            textWidthChange(e) {
                let that = this
                let dy = e.clientY;//当你第一次单击的时候，存储Y轴的坐标。
                document.onmousemove = e => {
                    if (e.clientY > that.innerHeight) {
                        return
                    }
                    if (e.clientY < dy) {
                        that.tableHeight -= (dy - e.clientY)
                    } else {
                        that.tableHeight += (e.clientY - dy)
                    }
                    dy = e.clientY
                };
                document.onmouseup = e => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
                e.stopPropagation();
                e.preventDefault();
                return false;
            },
        }
    }

</script>