0

我正在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())
},

时间线图片

在此处输入图像描述

4

1 回答 1

0

这是 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 时间轴如何将鼠标悬停事件添加到 vis-item box-box

于 2018-07-12T06:20:20.763 回答