antd的tag组件设置二次确认close

原创于 2022-09-28 17:11:45 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

日常专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Ant Design Vue中自定义Tag的关闭行为。通过在Tag的关闭事件中添加event.preventDefault()来阻止默认行为，并展示了如何使用$confirm进行确认删除操作。

解决思路

查看了ant-design-vue的Tag源码，发现通过setVisible方法向父组件抛出close事件
源代码如下图：
在这里插入图片描述

解决办法

在close方法中开头添加 event.preventDefault() 即可，阻止setVisible默认行为
例：

<a-tag closable v-for="(item, index) in list" :key="index" @close="(event) => delTag(index, event)">
  <slot name="content" :item="item"></slot>
</a-tag>

// 删除标签
delTag(index, event) {
  const _this = this
  // 阻止默认行为
  event.preventDefault()
  this.$confirm({
    title: '是否确认删除？',
    okText: '确认',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      _this.list.splice(index, 1)
      _this.$success({
        title: '删除成功'
      })
    }
  })
}