Reaction particle

src/client/directives/index.ts

@@ -3,8 +3,10 @@ import Vue from 'vue';
 import userPreview from './user-preview';
 import autocomplete from './autocomplete';
 import size from './size';
+import particle from './particle';
 
 Vue.directive('autocomplete', autocomplete);
 Vue.directive('userPreview', userPreview);
 Vue.directive('user-preview', userPreview);
 Vue.directive('size', size);
+Vue.directive('particle', particle);

src/client/directives/particle.ts

@@ -0,0 +1,22 @@
+import Particle from '../components/particle.vue';
+
+export default {
+	bind(el, binding, vn) {
+		el.addEventListener('click', () => {
+			const rect = el.getBoundingClientRect();
+
+			const x = rect.left + (el.clientWidth / 2);
+			const y = rect.top + (el.clientHeight / 2);
+
+			const particle = new Particle({
+				parent: vn.context,
+				propsData: {
+					x,
+					y
+				}
+			}).$mount();
+
+			document.body.appendChild(particle.$el);
+		});
+	}
+};