如何从vue.js中捕获Jquery事件

Question

场景:我有一个iframe(它托管在同一个域中,但纯粹只使用Jquery)并且它已被编码为触发一些带参数的事件.我必须在父vue.js应用程序中使用参数捕获这些事件.

IFRAME:

$('*').mouseover(function (event) {
  var event = jQuery.Event( "mouseover-highlight" );
  event.top = $(this).offset().top;
  event.left = $(this).offset().left;
  parent.$('body').trigger(event);
});

vue.js

以某种方式从vue.js捕获此事件并相应地设置div的css样式(设置'绝对'位置).我在v2之前使用vue.js中的Jquery来使用vue.js,但是我在文档中看到vue.js不能再捕获本机事件了.有解决方案吗

Answer 1

jQuery使用它自己的事件系统.你不能用Vue捕获从jQuery发出的事件,你必须用jQuery捕获它们并从处理程序调用Vue.

new Vue({
  el: "#app",
  data:{
    iframeSource: $("template").html()
  },
  methods:{
    onMouseover(event){
      alert(`Top: ${event.top}, Left: ${event.left}`)
    }
  },
  mounted(){
    $("body").on("mouseover-highlight", this.onMouseover)    
  },
  beforeDestroy(){
    $("body").off("mouseover-hightlight", this.onMouseover)
  }
})

这是一个工作的例子.

注意:在使用Vue之外的其他内容添加事件时,您应该自行管理它们,尤其是在组件中添加它时.组件被创建/销毁多次,您不希望最终有多个处理程序.

Answer 2

https://jsfiddle.net/wx84na32/2/请检查小提琴，这是您想要的完整示例。超文本标记语言

<button id="testBtn">Trigger an event</button>
<div id="app">
<div v-show="this.show">
1st Argument of Custom Event <br />
"{{ one }}"
<br />
2nd Argument of Custom Event <br />
"{{ two }}"
<br />
A complete event object below <br />
{{ event }}
</div>
</div>

JavaScript / jQuery / Vue

//jQuery

$('#testBtn').on("click", function(event) {
    console.log(this, 'this');
  $(this).trigger("custom", ["1st", "2nd"]);
});

//vue.js


new Vue({
  el: '#app',
    mounted () {

    let _this = this;

    $(document).on("custom", function(event, one, two) {

        console.log(event, 'event');
      console.log(one, 'one');
      console.log(two, 'two');

      _this.event = event;
      _this.one = one;
      _this.two = two;

      _this.show = true;

    });
  },
  data () {
    return {
        show : false,
        event : {},
      one : '',
      two : ''
    }
  }
});

[ https://jsfiddle.net/wx84na32/2/]