vue 拉伸

要求和效果：

元素定位到bottom为0，左右不可以拖动，只能向上向下拖动，向上可以拖动到窗口可视区域最高处，向下拖动的极限就是整个元素的高度为0，拖动的时候，位置不变，增减高度

需要下载js-cookie，也可以直接使用localStorage不用下载js-cookie插件，然后代码就可以直接运行

HTML:

<template>
  <div class="form-all-style">
    <div style="height: 432px" id="zhankaiStyle" class="bottom-form" ref="kongtiao"
      @mousedown="mouseDownHandleelse($event)" @mouseup="mouseUpHandleelse($event)">
    </div>
  </div>
</template>

JS:

<script>
import Cookies from 'js-cookie'
export default {
    data() {
      return {
        moveDataelse: {
          x: null,
          y: null,
          TopDong: null
        }
      }
    },
    computed: {
      // 检测定位top的变化
      TopDongChange() {
        return this.moveDataelse.TopDong
      }
    },
    mounted() {
      // 给元素一个起始的高度值，并存在cookie中
      Cookies.set('chazhiValue', 432)
    },
    watch: {
      // 定位top的变化值，就是元素高度的变化值，通过原始值和元素top定位的变化值最终得到的就是height高度值
      TopDongChange(newVal, oldVal) {
        console.log(newVal, oldVal)
        var reduce
        // 因为oldVal起始值为null，所以先排除掉
        if (!oldVal && typeof oldVal === 'object') {
          reduce = 0
        } else {
          reduce = oldVal - newVal
        }
        document.getElementById('zhankaiStyle').style.height = Number(Cookies.get('chazhiValue')) + reduce + 'px'
        Cookies.set('chazhiValue', Number(Cookies.get('chazhiValue')) + reduce)
      }
    },
    methods: {
      // 鼠标按下
      mouseDownHandleelse(event) {
        this.moveDataelse.y = event.pageY - this.$refs.kongtiao.offsetTop
        event.currentTarget.style.cursor = 'move'
        window.onmousemove = this.mouseMoveHandleelse
      },
     // 鼠标移动
      mouseMoveHandleelse(event) {
        this.moveDataelse.TopDong = event.pageY - this.moveDataelse.y
      },
     // 鼠标松开
      mouseUpHandleelse(event) {
        window.onmousemove = null
        event.currentTarget.style.cursor = 'move'
      }
    }
  }
</script>

 CSS：

.form-all-style {
    width: 100%;
    height: 100%;
  }

  .bottom-form {
    width: calc(100% - 120px);
    position: fixed;
    bottom: 0px;
    height: 432px;
    padding-top: 30px;
    background-color: saddlebrown;
  }