在vis js事件上获取错误

Question

我正在vue.js应用中构建时间轴，所以我决定使用vis.js，但是当我想添加一些事件时遇到了问题。首先，当我设置@drop="myDropCallback()"并放下任何一项时，什么也没发生，因此不会调用该函数，但是当我放@mouseOver="myDropCallback()"时它起作用了，这很奇怪。

第二个当我执行mouseOver事件时，我想使用this.$refs.timeline.getEventProperties(event)获取事件属性，但是每次都会遇到此错误

  

“ click”事件处理程序中的错误：“ TypeError：无法读取未定义的属性'center'”

和这个错误

  

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

那么有谁知道该如何解决？还是我做错了什么？

模板

<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