vue开发系统 - 评论列表-CFANZ编程社区

写评论组件，希望实现失焦时评论回复框折叠
- 如图所示
- 问题：如何使得Comment组件失焦时，回复面板折叠？
- 监听textarea的blur，在点击提交按钮时，会直接执行面板折叠操作，从而导致未执行提交评论方法。
- 监听外部div的blur事件。div 无focus,blur 事件，查找了下资料，提到，设置tabIndex 属性为0，css中outline为none，tabIndex为tab键聚焦顺序，默认值为-1,即无聚焦事件。详情参考MDN tabIndex。但回复面板内部有输入框，当内部输入框聚焦时将触发到blur事件，不符合预期。
- 采用在页面中监听click事件控制失焦事件，CommentItem组件内部阻止click冒泡的方式。可实现该界面，需要注意的点是回复按键并不在回复面板组件中，需要对其进行click.stop阻止冒泡。
  - 列表中，commentItem组件阻止冒泡，在单个commentItem中可以实现效果，但在commentList中点击会产生冲突，须在CommentList中对其进行处理。
  - 认为可在CommentList中针对CommentId进行控制回复面板的展开与收起，但后续没有再采取这种效果，而是仅在点击【收起】时收起评论面板
- 写组件和组件列表的时候没有规划好，导致先写了组件而忽略了面板的控制，做了重复的工作，需要注意提前规划好整体效果
- 在组件props传递的过程中，善用params，这样可以先打通组件属性传递通道，对后续拓展非常有利。以本次评论组件举例，此处有 CommentItem,CommentInput,SubmitBtn三层嵌套，分别对应评论组件、评论输入框与点击提交按钮。由 CommentItem传入params与post-comment-api，由输入框进行输入获取与校验，由提交按钮进行api调用，获取调用结果。如果不使用params传参，例如，CommentItem中传递
```
//  ** in CommentItem
const sumbitReplyComment = (commentText: string) => {
	  // 提交回复, posi api
    api('submit', commentText);
}
<CommentInput :commentText="commentText"  :sumbitComment="sumbitReplyComment "/>

// ** in  CommentInput
<SubmitBtn  :commentText="props.commentText"  :postApi="props.sumbitReplyComment "/ >

// ** in SubmitBtn
const submitHandler = () => {
	props.postApi(props.commentText);
}

<button @click="submitHandler" />
```
  当传递数据需要增加字段时，需要不断增加传递字段，修改内容非常多。
```
//  ** in CommentItem
const sumbitReplyComment = (params : {commentText: string}) => {
	  // 提交回复, posi api
    api('submit', params);
}
<CommentInput :params="{commentText}"  :sumbitComment="sumbitReplyComment "/>

// ** in  CommentInput
<SubmitBtn  :commentText="{...props.params, commentText: value}"  :postApi="props.sumbitReplyComment "/ >

// ** in SubmitBtn
const submitHandler = () => {
	props.postApi(props.params);
}

<button @click="submitHandler" />
```
  采用params传递的方式，可以非常方便的拓展字段。
- 评论列表加载，采用分页加载的方式
- vue3 循环引用组件出现ts报错，找不到props
  - 原因未知……循环引用时会出现该报错，未查到相关资料，项目运行无报错，但静态检查时会报错。暂未解决。