为什么 '@drop' 事件在 vue 中对我不起作用? [英] Why doesn't the '@drop' event work for me in vue?
问题描述
@drop 监听器对我不起作用.它不会调用我要它调用的方法.
我想拖动芯片并能够将其放到另一个组件上，并执行一个功能，但是在放置芯片的时候，没有执行dropLink方法，所以我假设未发出 @drop 事件.
控制台上没有显示错误.
其余事件运行良好，例如 @dragstart.
这是我使用的组件的代码:
</模板><脚本>导出默认{name: 'ItemArticle',道具: {文章: {类型:对象，要求:真实}},计算:{链接(){返回 this.article.links}},方法: {mouseUp(事件，文章){this.$emit('mouseUp', { event, article })},preventKey (keydown) {this.$emit('preventKey', keydown)},dragChipToLinkToAnotherElement(事件){event.dataTransfer.setData('text/plain', this.article.id)},dropLink (e) {//但是这个方法永远不会被调用console.log('evento drop is ok', e)}}}
在项目中我也使用 Nuxt 以防万一.
为了使 div 成为放置目标，div 的 dragenter 和 dragover 事件必须取消.您可以调用 Event.preventDefault() 那些带有 .prevent 的事件 事件修饰符:
如果您需要根据拖动数据类型接受/拒绝放置，请设置一个有条件地调用 Event.preventDefault() 的处理程序:
export default {方法: {checkDrop(e) {if (/* 允许的数据类型 */) {e.preventDefault()}},}}
The @drop listener doesn't work for me. It doesn't call the method I'm telling it to call.
I want to drag the chip and be able to drop it on another component, and perform a function, but at the time of dropping the chip, the dropLink method is not executed, so I assume that the @drop event is not emitted.
No errors are displayed on the console.
The rest of the events do work well, like @dragstart.
This is the code of the component I use:
<template>
<div
@keydown="preventKey"
@drop="dropLink"
>
<template
v-if="!article.isIndex"
>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-chip
small
draggable
class="float-left mt-2"
v-on="on"
@dragstart="dragChipToLinkToAnotherElement"
>
<v-icon x-small>
mdi-vector-link
</v-icon>
</v-chip>
</template>
<span>Link</span>
</v-tooltip>
<v-chip-group
class="mb-n2"
show-arrows
>
<v-chip
v-for="(lk, index) in links"
:key="index"
small
outlined
:class="{'ml-auto': index === 0}"
>
{{ lk.text }}
</v-chip>
</v-chip-group>
</template>
<div
:id="article.id"
spellcheck="false"
@mouseup="mouseUp($event, article)"
v-html="article.con"
/>
</div>
</template>
<script>
export default {
name: 'ItemArticle',
props: {
article: {
type: Object,
required: true
}
},
computed: {
links () {
return this.article.links
}
},
methods: {
mouseUp (event, article) {
this.$emit('mouseUp', { event, article })
},
preventKey (keydown) {
this.$emit('preventKey', keydown)
},
dragChipToLinkToAnotherElement (event) {
event.dataTransfer.setData('text/plain', this.article.id)
},
dropLink (e) {
//but this method is never called
console.log('evento drop is ok', e)
}
}
}
</script>
In the project I am also using Nuxt in case that is relevant.
解决方案 In order to make the div a drop target, the div's dragenter and dragover events must be canceled. You can invoke Event.preventDefault() on those events with the .prevent event modifier:
<div @drop="dropLink" @dragenter.prevent @dragover.prevent></div>
If you need to accept/reject drops based on the drag data type, set a handler that conditionally calls Event.preventDefault():
<div @drop="dropLink" @dragenter="checkDrop" @dragover="checkDrop"></div>
export default {
methods: {
checkDrop(e) {
if (/* allowed data type */) {
e.preventDefault()
}
},
}
}
这篇关于为什么 '@drop' 事件在 vue 中对我不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
