vue怎么添加自定义事件?

<img :src="list.src" @click="switchDo"/>

1.如同上面代码的点击事件一样,但是有时候需求并不是点击事件,比如‘左滑动’,‘右滑动’,‘点击三次’,‘长按’这种自定义的事件怎么添加,怎么写?

2.能不能就是像下面这样调用自定义事件?

//比如,threeClick是自己添加的自定义事件。
<img :src="list.src" @threeClick="switchDo"/>

回答:

1.最近正在学习 RxJS,你所说的这些自定义事件可以尝试使用 RxJS 来实现:三连击示例 https://jsfiddle.net/KingMari…

2.标准 HTML 元素的话,还要结合 https://developer.mozilla.org… 来实现:Vue 绑定三连击示例 https://jsfiddle.net/KingMari…。如果是自定义组件,那么用 $emit 即可。

回答:

可以这么写,但是前提是 其它地方 已经 emit了一个你定义的事件,

this.$emit("dropdown","a")
<img :src="list.src" @dropdown="dropdownClick"/>

methods:{
        dropdownClick: function (a) {
                ...
            },
}

回答:

还是具体问题具体分析吧,比如滑动,都是通过 touch 事件组合出来的,所以你的需求应该自己在 handler 里处理。

$emit() 是触发自定义事件的。

回答:

谢邀。看了一下最高票的答案完全是在乱写,先踩为敬。

如果题主是想绑定自定义 DOM 事件,Vue 是支持 DOM 自定义事件的,至少使用 render 函数的时候是支持,没有测试使用 template compiler,不过推测应该也可以支持。另外在使用的过程中应该要注意一下事件名大小写的问题,由于 html attr name 不区分大小写,所以自定义的事件名应该尽量采用全部小写或者短线的形式,而避免采用驼峰形式。

如果题主只是想实现自定义的功能而不是特指绑定 DOM 事件,推荐使用组件封装来解决问题,上面的答案已经降到就不再赘述了。

回答:

自定义事件一般用于自定义组件的,img标签很显然不具备你需要的这些事件,解决方案是封装为一个自定义组件,实现并开放这几个自定义事件。

Vue.component('custom-img', {
  template: '<img :src="src" @touchmove="ontouchmove" />',
  props: {
    src: String
  },
  methods: {
    ontouchmove: function (e) {
      // if (...) 实现判断slideLeft的逻辑
      {
        this.$emit('slideLeft');
      }
    }
  }
});

调用之处:

<custom-img :src="list.src" @slide-left="onSlideLeft"></custom-img>

回答:

https://github.com/vuejs/vue/…

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注