Ant Desgin Vue a-table+a-input+a-modal 组合问题

需求功能

使用插槽将某一列替换为 input 利用focus 来触发modal的显示/隐藏

相关问题:

一.弹层无法正常显隐使用

具体表现:

一. 使用自定义组件形式

1. 点击关闭重复触发focus事件,导致modal 闪动无法关闭
2. 点击蒙层/右上角关闭图标出现:

Avoid mutating a prop directly since the value will be overwritten whenever the parent componentre-renders.
Instead, use a data or computed property based on the prop's value. Prop being mutated: "childVisible"

此问题是说在子组件中也操作了导出外部的属性即 props中的属性,但实际上使用的都是调用的父组件的事件

handleCancel(){
      console.log(" 我是子级cancel ");
      this.$emit("closeChild");
    }

且针对于Ant Desgin Vue 的文档

https://www.antdv.com/components/modal-cn/
文档当说明

点击关闭的事件都是同一个

二.使用a-modal 形式

1. 点击关闭重复触发focus
2. 点击蒙层/右上角关闭图标同样触发点击关闭时的表现但 未出现

Avoid mutating a prop directly since the value will be overwritten whenever the parent componentre-renders.
Instead, use a data or computed property based on the prop's value. Prop being mutated: "childVisible"

问题复现源码

1.github
链接：https://github.com/yuanbo1998/ant-desgin-vue-tim-problem.git
issue: https://github.com/vueComponent/ant-design-vue/issues?page=2&q=modal
分支:master 注意: 默认分支是main ,请检出项目后切换下分支到master哦.
页面:在 About 页面中

e:http://localhost:8080/about

2.百度云盘:
链接：https://pan.baidu.com/s/18dg2bb6RPnNFY_4t2CJGxA
提取码：sksk

问题分析

1.重复触发input 的focus事件:

-确认未使用 auto-focus
-控制台中查看确认重复触发 focus 事件
-尝试使用基础标签不使用 focus 事件尝试

• 这里将input 替换 为span
• focus 替换为 click
  表现正常,可正常开启关闭
  具体原因未知,怀疑可能是浏览器对input 的默认再次聚焦
  如果你的需求不是非要使用input 可以使用此方法来规避这个问题

结尾

1.此文章本人Ant Desgin Vue的问题,请各位大佬指导改正.
2.对于本人引用的链接如原作者希望特殊说明请告知,方便更改.
3.如果对上述的描述存在不了解,欢迎在帖子下评论,获取他人解答.
4.如果本文章不能解决你的问题,当然是问问万能的百度咯.