vue 拖拽改变宽度

<template>
  <div class="x-handle" unselectable="on" onselectstart="return false" @mousedown="mouseDown"></div>
</template>

<script>
export default {
  name: 'XDragHandle',
  data() {
    return {
      lastX: '',
    }
  },
  created() {
    document.addEventListener('mouseup', this.mouseUp)
  },
  destroyed() {
    document.removeEventListener('mouseup', this.mouseUp)
  },
  methods: {
    mouseUp() {
      this.lastX = ''
      document.removeEventListener('mousemove', this.mouseMove)
    },
    mouseDown(event) {
      document.addEventListener('mousemove', this.mouseMove)
      this.lastX = event.screenX
    },
    mouseMove(event) {
      console.log('move')
      this.$emit('widthChange', this.lastX - event.screenX)
      this.lastX = event.screenX
    },
  },
}
</script>

<style lang="scss" scoped>
.x-handle {
  width: 2px;
  cursor: w-resize;
  z-index: 10;
  background-color: #f1f4f9;
}
</style>