vue 拖拽改变宽度

Kill_paradise

已于 2022-12-28 10:10:24 修改

阅读量262

点赞数

分类专栏： js 文章标签：前端 javascript html

于 2022-12-27 16:49:11 首次发布

本文链接：https://blog.csdn.net/Kill_paradise/article/details/128458339

版权

js 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

<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>