Vue kết hợp xử lý sự kiện

Question

Tôi có xử lý sự kiện Vue sau đây với contenteditable:

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

Tuy nhiên, tôi có rất nhiều nơi tôi gọi cùng mã và mã ngày càng dài và tiết. Có cách nào để kết hợp xử lý sự kiện? Một cái gì đó như:

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

Answer 1

Tôi không nghĩ rằng có một cách, hiện tại, để kết hợp trình xử lý sự kiện như bạn mô tả.

gì bạn có thể làm là làm cho điều này div đó là thành phần wrapper riêng (có tên là 'có thể chỉnh sửa-wrapper', ví dụ) và phát ra một change sự kiện:

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

Và sau đó bạn sẽ chỉ cần nghe một sự kiện thay đổi về thành phần (data là một đối tượng với $event, và current tài sản):

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

Answer 2

bạn có thể tạo chỉ thị tùy chỉnh của bạn cho mục đích này. Mẫu này có thể giúp bạn:

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]); 
     } 
    } 
    } 
}) 

Chỉ thị này sẽ thêm trình xử lý sự kiện vào phần tử. Nó kiểm tra nếu phần tử là một thành phần vue; nếu nó là một thành phần vue nó đăng ký các sự kiện thông qua $on. Nếu nó không phải là một thành phần vue nó sử dụng addEventListener. Bạn có thể thay đổi hành vi này nếu bạn muốn.

Và việc sử dụng cũng giống như:

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

Hoặc:

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