vue3+ts 开发系统 -- 评论列表

• 写评论组件，希望实现失焦时评论回复框折叠
  • 如图所示
  • 问题：如何使得Comment组件失焦时，回复面板折叠？
  • 监听textarea的blur，在点击提交按钮时，会直接执行面板折叠操作，从而导致未执行提交评论方法。
  • 监听外部div的blur事件。div 无focus,blur 事件，查找了下资料，提到，设置tabIndex 属性为0，css中outline为none，tabIndex为tab键聚焦顺序，默认值为-1,即无聚焦事件。详情参考MDN tabIndex。但回复面板内部有输入框，当内部输入框聚焦时将触发到blur事件，不符合预期。
  • 采用在页面中监听click事件控制失焦事件，CommentItem组件内部阻止click冒泡的方式。可实现该界面，需要注意的点是回复按键并不在回复面板组件中，需要对其进行click.stop阻止冒泡。
    • 列表中，