vue, 左右布局宽，可拖动改变

最新推荐文章于 2024-12-20 19:00:00 发布

原创最新推荐文章于 2024-12-20 19:00:00 发布

· 487 阅读

2 ·

版权

文章标签：

#vue.js #前端 #javascript

1：建立一个draggableMixin.js 混入的方式使用

2：代码如下draggableMixin.js

export default {
  data() {
    return {
      leftWidth: 330,
      isDragging: false,
      startX: 0,
      startWidth: 0,
    };
  },
  methods: {
    startDragging(e) {
      this.isDragging = true;
      this.startX = e.clientX;
      this.startWidth = this.leftWidth;
      document.addEventListener('mousemove', this.onDragging);
      document.addEventListener('mouseup', this.stopDragging);
    },
    onDragging(e) {
      if (this.isDragging) {
        const offset = e.clientX - this.startX;
        this.leftWidth = this.startWidth + offset;
      }
    },
    stopDragging() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDragging);
      document.removeEventListener('mouseup', this.stopDragging);
    },
  },
};

页面使用

import draggableMixin from '@/mixins/draggableMixin';

mixins: [draggableMixin],

//左

<div>

Left

</div>

//左右托拽的条条样式可以自己改

//右

Right

</div>
</div>

.resizer {