如何将事件修饰符传递到Vue中的作用域广告位?

时间:2020-03-11 15:34:52

标签: vue.js vuejs2

我通过范围槽将事件处理程序传递给父级,然后传递给子级。如何以仍然可以访问Vue事件修饰符的方式编写它?我需要等同于@dragenter.prevent.self="someAction()"

的东西
// DragAndDropUploader.vue
<template>
    <div>   
        <slot :events="eventHandlers"></slot>
    </div>
</template>

<script>
export default {
    computed: {
        eventHandlers() {
            return {
                dragover: event => event.preventDefault(),
                dragenter: event => {
                    event.preventDefault()
                }
                drop: event => {
                    event.preventDefault()
                    this.performAction(event)
                }
            }
        }
    }
    methods: {
        performAction(){
            console.log('hi')
        }
    }
}



// ParentComponent.vue
<template>
    <drag-and-drop-uploader v-slot="{ events }">
        <div v-on="events">
            <image-picker></image-picker>
        </div>
    </drag-and-drop-uploader>
</template>

1 个答案:

答案 0 :(得分:0)

您可以使用咖喱传递事件参数:

coordinates_list = []
for box, color in box_to_color_map.items():
  ymin, xmin, ymax, xmax = box
  height, width, channels = image.shape
  ymin = int(ymin*height)
  ymax = int(ymax*height)
  xmin = int(xmin*width)
  xmax = int(xmax*width)
  coordinates_list.append([xmin, ymin, xmax, ymax])

return coordinates_list