vue点击浏览器的返回按钮失效_JSelectRole点击出现一次下拉框,消失后再点击无响应...

代码托管:Github和Gitee,国内用户使用Gitee下载速度较快。

系统环境:Win10/Ubuntu,JDK8,maven,node,docker。

依赖服务:Docker,MySQL8,Redis5

一,问题排查

Jeecg技术社区有用户提交一个issue,自定义组件下选择职务失败,点击一次后消失,显示选中状态,再次点击无反应。

ffb1f58d397c5a5d4122e06ed6d1203d.png

复现问题,点击输入框功能失效,此时右边的“选择”按钮工作正常,点击弹出模态选择框。

62a1f514c7bb8b04be682909715eb085.png

二,问题修复

找到后台管理页面和对应的自定义控件代码文件:

9a6fae0cfb794142d7adcc7b3e6cac8e.png

1,JSelectUserByDep.vue

根据代码,@search搜索事件触发时,将弹出模态选择框。

添加console.log(),测试发现事件没有正确触发。

那么就添加@click事件,点击时触发,正常弹出模态选择框。

c0bf4f63ceca6c970bde8cf22d3053ef.png

2,JSelectBizComponent/index.vue

查看代码,和JSelectUserByDep稍微不同,JSelectBizComponent处理了dropdownVisibleChange事件,注意到代码注释:

Ant Design Vue错误的设置了open样式,导致点击事件失效。

比对“搜索”按钮点击事件,尝试增加this.visible = true,显示Modal选择框,测试功能正常。

380c85d53c94bf9f36eb271ee3cc68d3.png

三,总结

1,浏览器兼容性

看到问题第一反应可能是浏览器兼容性问题,于是测试了Chrome, Fixfox, Edge,发现都能重现。

前端测试无法兼顾所有浏览器,选择常用的主流浏览器测试验证。

2,前端框架

如果是学习目的,可以尝试一些新出现的开发框架,体验新技术,跟踪发展趋势。

如果是商业项目,通常选择主流的常用框架,比如Ant Design,Vue。

测试通过,提交代码,创建Pull Request。

c1114313458a2997f18c3dc0a1ac47a7.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值