vue tooltip动态绑定提示信息_一个全新的Vue拖拽特性实现：“调整尺寸”部分-CSDN博客

关于拖拽

CabloyJS提供了完备的拖拽特性，可以实现移动和调整尺寸两大类功能，这里对调整尺寸的开发进行阐述

关于 移动的开发，请参见：拖拽：移动

演示

开发步骤

下面以模块test-party为例，说明拖拽（调整尺寸）的开发步骤

完整源码请参见文件src/module/test-party/front/src/kitchen-sink/pages/dragdrop/dragdropResize.vue，这里只说明开发要点

1. v-eb-dragdrop

通过directive v-eb-dragdrop向需要实现调整尺寸的DOM元素附加拖拽特性

更多情况下，我们并不是拖拽DOM元素本身，而是拖拽与DOM元素相对应的手柄元素

<div class="test-dragdrop-resize-element" :style="{width:width+'px',height:height+'px'}">
      <span class="resize-handler-col" v-eb-dragdrop="getDragdropContext('col')"></span>
      <span class="resize-handler-row" v-eb-dragdrop="getDragdropContext('row')"></span>
    </div>
getDragdropContext(resizeDirection) {
      return {
        scene: this.dragdropScene,
        resizable: true,
        resizeDirection,
        onDragStart: this.onDragStart,
        onDragMove: this.onDragMove,
        onDragEnd: this.onDragEnd,
      };
    },

我们向v-eb-dragdrop传入一个拖拽Context对象，具体参数如下：

拖拽事件

1. onDragStart

当启动拖拽时激发。我们可以通过此事件返回一个tooltip信息，进行友好的提示

onDragStart({ $el, context }) {
      const isRow = context.resizeDirection === 'row';
      const size = this.$view.sizeExtent;
      const tooltip = isRow ? this.height : this.width;
      return { size, tooltip };
    },

参数

|名称|说明| |--|--| |$el|拖拽手柄元素| |context|拖拽Context对象|

返回值

|名称|说明| |--|--| |size|当前拖拽元素所属容器的尺寸，当拖动时便于准确计算偏移量的百分比。如果不关心移动的百分比信息，size可以返回null| |tooltip|拖拽元素的提示信息|

2. onDragMove

当拖动时激发

onDragMove({ $el, context, diff }) {
      const isRow = context.resizeDirection === 'row';
      if (!isRow) {
        let diffAbs = parseInt(diff.abs.x);
        if (diffAbs === 0) return;
        this.width += diffAbs;
        const tooltip = this.width;
        return { eaten: true, tooltip };
      } else {
        let diffAbs = parseInt(diff.abs.y);
        if (diffAbs === 0) return;
        this.height += diffAbs;
        const tooltip = this.height;
        return { eaten: true, tooltip };
      }
    },

参数

关于 diff.percent: 1. 在Grid布局中，往往通过百分比来布局DOM元素。如果给这些DOM元素启用拖放特性来调整尺寸，那么调整的尺寸也将是百分比。可以参考 仪表盘中 部件的拖放实现 2. 如果要得到准确的 diff.percent信息，必须在事件 onDragStart中返回Grid布局容器的 size信息

返回值

|名称|说明| |--|--| |eaten|如果当前传入的diff偏移量有效，就设置eaten:true，从而重新计算新的diff偏移量| |tooltip|拖拽元素的提示信息|

关于 eaten: - 在Grid布局中，往往通过百分比来布局DOM元素。而这些百分比不是连续值。因此，需要拖动一定的像素才认为是一个有效的百分比变更。这时，我们就需要返回 eaten:false，告知系统当前的偏移量需要累积，直到一个认可的偏移量出现，然后再返回 eaten:true

3. onDragEnd

当拖拽行为结束时激发。如果需要执行清理工作，可以响应此事件

onDragEnd({ $el, context }) {
      // do nothing
    },

参数

|名称|说明| |--|--| |$el|拖拽手柄元素| |context|拖拽Context对象|