vis js事件出错

Question

我正在vue.js 应用程序中构建时间线，因此我决定使用vis.js，但是当我想添加一些事件时遇到了问题。首先，当我设置@drop="myDropCallback()" 并且当我放下一个项目时没有任何反应，因此不会调用该函数但是当我输入@mouseOver="myDropCallback()" 然后它可以工作，这很奇怪。

第二次当我在做mouseOver 事件时，我想用this.$refs.timeline.getEventProperties(event) 获取事件属性，但我每次都收到这个错误

“点击”事件处理程序中的错误：“TypeError：无法读取未定义的属性“中心””

还有这个错误

无法读取未定义的属性“中心”

那么有人知道如何解决这个问题吗？还是我做错了什么？

模板

<timeline v-if="items.length > 0" ref="timeline"
  :items="items"
  :groups="groups"
  :options="options"
  @drop="myDropCallback()">
</timeline>

拖放功能

myDropCallback: function (event) {
  console.log('value', this.$refs.timeline.getEventProperties())
},

时间线图片

Answer 1

这是 vis.js 源代码的摘录。您会注意到它尝试做的第一件事是找到事件的中心值。

Timeline.prototype.getEventProperties = function (event) {
  var clientX = event.center ? event.center.x : event.clientX;
  var clientY = event.center ? event.center.y : event.clientY;
  var x;
  if (this.options.rtl) {
    x = util.getAbsoluteRight(this.dom.centerContainer) - clientX;
  } else {
    x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
  }
  var y = clientY - util.getAbsoluteTop(this.dom.centerContainer);

  var item = this.itemSet.itemFromTarget(event);
  var group = this.itemSet.groupFromTarget(event);
  var customTime = CustomTime.customTimeFromTarget(event);

  var snap = this.itemSet.options.snap || null;
  var scale = this.body.util.getScale();
  var step = this.body.util.getStep();
  var time = this._toTime(x);
  var snappedTime = snap ? snap(time, scale, step) : time;

  var element = util.getTarget(event);
  var what = null;
  if (item != null) {
    what = 'item';
  } else if (customTime != null) {
    what = 'custom-time';
  } else if (util.hasParent(element, this.timeAxis.dom.foreground)) {
    what = 'axis';
  } else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {
    what = 'axis';
  } else if (util.hasParent(element, this.itemSet.dom.labelSet)) {
    what = 'group-label';
  } else if (util.hasParent(element, this.currentTime.bar)) {
    what = 'current-time';
  } else if (util.hasParent(element, this.dom.center)) {
    what = 'background';
  }

  return {
    event: event,
    item: item ? item.id : null,
    group: group ? group.groupId : null,
    what: what,
    pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
    pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,
    x: x,
    y: y,
    time: time,
    snappedTime: snappedTime
  };
};

因此，您的问题很可能是由于没有为该方法提供有效事件。我相信这是因为您没有为 getEventProperties 方法提供任何参数。我会尝试类似：

myDropCallback: function (event) {
  console.log('value', this.$refs.timeline.getEventProperties(event))
},

另外，这里有一篇很好的堆栈溢出帖子，由 vis.js 的一位作者回答：vis.js timeline how to add mouse over event to vis-item box-box