2021-07-07

拖动改变元素高度

 <template>
  <div style="position:fixed;right:0;bottom:0">
              <div
              style="cursor:s-resize;width:200px;height:2px;background:transparent" 
              @mousedown="mouseDown"></div>

            <div  style="width:200px;background:red" :style="{height:height+'px'}" 
            >
            </div> 
       </div>
</template>




 <script>
export default {
  name: "XHandle",
  data() {
    return {
      lastY : "",
      height:200,
    };
  },
 
  created() {
    document.addEventListener("mouseup", this.mouseUp);
  },
 
  destroyed() {
    document.removeEventListener("mouseup", this.mouseUp);
  },
 
  methods: {
    mouseDown(event) {
      document.addEventListener("mousemove", this.mouseMove);
      this.lastY = event.screenY;
    },
    mouseMove(event) {
      this.height+=this.lastY - event.screenY
      this.lastY = event.screenY;
    },
    mouseUp() {
      this.lastY = "";
      document.removeEventListener("mousemove", this.mouseMove);
    },
  }
};
</script>