- 写评论组件,希望实现失焦时评论回复框折叠
- 如图所示
- 问题:如何使得Comment组件失焦时,回复面板折叠?
- 监听
textarea
的blur
,在点击提交按钮时,会直接执行面板折叠操作,从而导致未执行提交评论方法。 - 监听外部div的
blur
事件。div 无focus,blur 事件,查找了下资料,提到,设置tabIndex
属性为0,css
中outline
为none
,tabIndex
为tab
键聚焦顺序,默认值为-1
,即无聚焦事件。详情参考MDN tabIndex。但回复面板内部有输入框,当内部输入框聚焦时将触发到blur
事件,不符合预期。 - 采用在页面中监听
click
事件控制失焦事件,CommentItem
组件内部阻止click
冒泡的方式。可实现该界面,需要注意的点是回复按键并不在回复面板组件中,需要对其进行click.stop
阻止冒泡。- 列表中,
- 如图所示
vue3+ts 开发系统 -- 评论列表
于 2022-02-08 15:07:12 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)