ant-design-vue 点击a-popconfirm组件时避免外层元素的点击事件
场景如图,点击图片时会有一个视口跳转事件,左下角有两个图标,是在a-popconfirm组件里的,点击图标时总是会触发图片的点击事件(代码中的toView()方法)。原始代码如下:<div v-for="(item, index) in data" :key="index" class="imgHolder"><div class="viewImgHolder"><.
·
场景如图,点击图片时会有一个视口跳转事件,左下角有两个图标,是在a-popconfirm组件里的,点击图标时总是会触发图片的点击事件(代码中的toView()方法)。
原始代码如下:
<div v-for="(item, index) in data" :key="index" class="imgHolder">
<div class="viewImgHolder">
<img :src="item.pic" class="viewImg" />
<div class="imgMask" @click.stop="toView(item)">
<p :title="item.name">{{ item.name }}</p>
<a-icon
class="imgIconEdit iconHover"
title="设置"
type="setting"
@click="editView(item)"
></a-icon>
<a-popconfirm
title="确定要删除吗?"
@confirm="deleteView(item)"
okText="确定"
cancelText="取消"
>
<a-icon class="imgIconDet iconHover" title="删除" type="delete"></a-icon>
</a-popconfirm>
</div>
</div>
</div>
解决办法为修改元素的层级关系,避免子元素冒泡到父元素,讲父级的div和图标元素放到同一层级。修改之后的代码如下:
<div v-for="(item, index) in data" :key="index" class="imgHolder">
<div class="viewImgHolder">
<img :src="item.pic" class="viewImg" />
<div class="imgMask" @click="toView(item)">
<p :title="item.name">{{ item.name }}</p>
</div>
<a-icon
class="imgIconEdit iconHover"
title="设置"
type="setting"
@click.stop="editView(item)"
></a-icon>
<a-popconfirm
title="确定要删除吗?"
@confirm="deleteView(item)"
okText="确定"
cancelText="取消"
>
<a-icon class="imgIconDet iconHover" title="删除" type="delete"></a-icon>
</a-popconfirm>
</div>
</div>
如果除了图标没有其它元素,可以在图片点击事件上添加.self修饰符,这样可以避免别的元素影响。
更多推荐
已为社区贡献1条内容
所有评论(0)