Vue.js绑定到DOM自定义事件,名称中包含点(如引导事件)

2023年11月9日 212次阅读

使用Vue 2.1.10

我可以使用v-on指令绑定到DOM事件.例如：

v-on:click

要绑定到DOM,请单击.
但我无法想象如何绑定到名称中有点的事件.例如来自bootstrap的“show.bs.modal”.

目前,我使用常规DOM方法在创建的钩子中使用变通方法绑定,但我真的想使用声明性语法.怎么能实现这一目标？谢谢

编辑：
问题是关于允许的语法：我怎么能这样做：

Vue.component('comp',{
  template:'<div v-on:show.bs.modal="sunrise"></div',
  methods:{
    sunrise:function(e){

     }

   }
})

最佳答案 我认为v-on不支持点,但您可以创建自定义指令来为该事件创建事件侦听器.

不确定是否有更简单的东西,但在下面的演示或这个fiddle应该工作.

该演示创建了一个名为dot的新事件,但也应该使用bootstrap事件(未测试).如果它不能与bootstrap一起使用,请告诉我,我会看看.

取消绑定仅在您使用v-if时有效.如果您要直接使用Javascript删除该元素.该活动仍将在那里.

var helloEvent = new Event('demo.event.hello');

document.addEventListener('demo.event.hello', function(e) {
  // this is just for testing event dispatching!
  console.log('main event listener');
}, false);

const bindCustomEvent = {
  getName: function(binding) {
    return binding.arg + '.' +
      Object.keys(binding.modifiers).map(key => key).join('.');
  },
  bind: function(el, binding, vnode) {
    const eventName = bindCustomEvent.getName(binding);

    console.log(el, eventName);
    document.addEventListener(eventName, binding.value);
  },
  unbind: function(el, binding) {
    const eventName = bindCustomEvent.getName(binding);
    console.log('unbinding', eventName);
    document.removeEventListener(eventName, binding.value);
  }
};

Vue.directive('bindCustomEvent', bindCustomEvent);

new Vue({
  el: '#app',
  data() {
    return {
      enabled: true,
      eventMsg: ''
    };
  },
  methods: {
    sunrise: function(e) {
      console.log('received event');
      this.eventMsg = 'received event';
    },
    testEvent: function() {
      document.dispatchEvent(helloEvent);
    },
    toggle: function() {
      console.log('toggle', this.enabled);
      this.enabled = !this.enabled;

      if (!this.enabled) {
        this.eventMsg = '';
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
  <div v-bind-custom-event:demo.event.hello="sunrise" v-if="enabled">
    Hello, {{eventMsg}}
  </div>

  <!--
  The following markup is not working
  <div v-on="demo.event.hello:sunrise" v-if="enabled">
    Hello, {{eventMsg}}
  </div>-->
  <button @click="testEvent()">
    Change
  </button>
  <button @click="toggle">
    <span v-if="enabled">disable custom event</span>
    <span v-else>enable custom event</span>
  </button>
</div>
点赞