Vue गठबंधन ईवेंट हैंडलर्स

Question

मैं contenteditable साथ निम्नलिखित Vue ईवेंट हैंडलर्स है:

<div contentEditable="true" 
v-on:keyup="changed($event, current, 0)" 
v-on:paste="changed($event, current, 0)" 
v-on:blur="changed($event, current, 0)" 
v-on:delete="changed($event, current, 0)" 
v-on:focused="changed($event, current, 0)"></div> 

हालांकि, मैं कई स्थानों पर जहां मैं एक ही कोड फोन और कोड लंबी और वर्बोज़ हो रही है है। घटना हैंडलर को गठबंधन करने का कोई तरीका है? कुछ ऐसा:

v-on:keyup:paste:blur:delete:focused?

Answer 1

मुझे नहीं लगता कि वर्तमान में ईवेंट श्रोताओं को गठबंधन करने के लिए एक तरीका है, जैसा कि आप वर्णन कर रहे हैं।

क्या आप (, 'संपादन योग्य-आवरण' नाम उदाहरण के लिए) इस div यह खुद आवरण घटक है बनाना है कर सकता है और एक change घटना फेंकना:

<div 
    contentEditable="true" 
    v-on:keyup="$emit('change', {$event, current})" 
    v-on:paste="$emit('change', {$event, current})" 
    v-on:blur="$emit('change', {$event, current})" 
    v-on:delete="$emit('change', {$event, current})" 
    v-on:focused="$emit('change', {$event, current})"> 
</div> 

और फिर आप केवल एक को सुनने के लिए की आवश्यकता होगी

<editable-wrapper @change="changed(data)"></editable-wrapper> 

Answer 2

आप इस उद्देश्य के लिए अपने कस्टम निर्देश बना सकते हैं: घटक पर परिवर्तन घटना (data$event के साथ एक वस्तु, और current गुण है)। यह नमूना आपकी मदद कर सकता है:

Vue.directive('wrap-on', { 
    bind: function(el, binding, vnode) { 
    // Keep function to remove the event later. 
    el.wrappedEventFunctions = el.wrappedEventFunctions || {}; 
    el.wrappedEventFunctions[binding.rawName] = binding.value; 

    for (var key in binding.modifiers) { 
     // Check if element is a vue component 
     if (vnode.componentInstance) { 
     vnode.componentInstance.$on(key, binding.value); 
     } else { 
     el.addEventListener(key, binding.value); 
     } 
    } 
    }, 
    unbind: function(el, binding, vnode) { 
    for (var key in binding.modifiers) { 
     if (vnode.componentInstance) { 
     vnode.componentInstance.$off(key, el.wrappedEventFunctions[binding.rawName]); 
     } else { 
     el.removeEventListener(key, el.wrappedEventFunctions[binding.rawName]); 
     } 
    } 
    } 
}) 

यह निर्देश तत्व हैंडलर को तत्व में जोड़ देगा। यह जांचता है कि तत्व एक vue घटक है; यदि यह एक vue घटक है तो यह $on के माध्यम से घटनाओं को पंजीकृत करता है। यदि यह एक vue घटक नहीं है तो यह addEventListener का उपयोग करता है। यदि आप चाहें तो आप इस व्यवहार को बदल सकते हैं।

<input v-wrap-on.click.keydown="mixedCallback" /> 

या:: घटना

<some-custom-component v-wrap-on.click.keydown="mixedCallback"> 
    ... 
</some-custom-component> 

इस समाधान $ के साथ