JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<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>

Babel + JSX

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 = '';
      }
    }
  }
})