ant design vue动态添加输入框，输入框动态样式bug_标签输入框 antdesign

作者：羊村懒王 | 2024-02-16 06:47:05

踩

标签输入框 antdesign

记录一个使用antdesign vue2 遇到的bug:
动态添加输入框问题

写了一个button点击事件动态添加输入框，当输入框为2个及以上时，在输入框右侧新增一个删除功能图标。
在这里使用了v-bind 对input输入框的style样式进行动态更新。

代码展示：
在这里插入图片描述

遇到的问题是：当添加第一个input框时，先执行了增加删除图标，再执行input框宽度样式从100%变为90%。
=》即删除图标会被挤到换行再回到input右侧。

效果拆解图：
首先显示为第一幅图，再快速变为第二幅图。
请添加图片描述

请添加图片描述

经过排查发现，input自带了一个动画效果，默认一个transition属性，所以当新增输入框时，删除的icon会立即执行，而input框会在0.3s后改变宽度为90%。

在这里插入图片描述
解决方案：
1）：使用deep取消antd input 内部动画效果

在这里插入图片描述

2）：在input外层包裹一个span，将动态样式变化绑定到span上，span上没有默认动画效果

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/91603