一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
前言
大家好，昨天的分享中，我们对沸点内容，评论及子评论模块进行了抽取封装，以实现代码的复用。截止目前沸点评论这一块还有几个功能点尚未实现，比如：发布评论，还有在前面分享中我们分析道：默认情况下只展示5条最新的评论，超过5条的评论则会在最后面显示一个“更多回复”的按钮 ，点击后跳转到一个新的页面，另外用户还可以通过点击“最新”或“最热”来切换评论的加载顺序等。总结一下主要就是3大块内容 ：
- 发布评论
- 查看更多回复
- 按最新或最热排序 今天的分享我们先来实现第一点：发布评论
功能分析
上图是官方中的操作流程，我们来看下，当点击评论图标评论区块展开时，默认只显示一个禁用状态的文本框，点击灰色文本框后发布功能被激活 - 文本框变为可用状态，同时表情图标，图片图标和发布按钮也一同展示出来，但在文本框内容为空的情况下发布按钮是不可用的，只有输入内容后按钮才会被激活。参照这个逻辑我们也来实现一下。
大概实现思路如下：
- 在reply-input类下添加一个van-field元素
- 添加focus事件用于控制输入框的背景色和发布按钮的显示
- 添加blur事件用于控制输入框变为禁用状态同时因此发布按钮
- 指定v-model用于接收输入的评论信息
- 设置placeholder
- 给发表评论按钮添加click事件，用于发布评论
- 在js代码中定义两个响应式属性showBtn和reply_content
- 在setup中定义方法inputFocus
- 在该方法中将showBtn属性设置为true，用于让发布按钮显示出来
- 获取到文本框元素，并给文本框元素添加active样式（背景变为白色）
- 在setup方法中定义方法inputBlur
- 在该方法中判断如果reply_content为空，即文本框内容为空，这时就可以将showBtn设置为false，隐藏发布按钮
- 同时移除掉文本框的active样式，让文本框变为禁用状态
- 在setup方法中定义publishComment方法，并调用后端发布评论接口，接口调用成功后重新刷新评论列表 核心代码及效果图
<div class="reply-input">
<van-field
@focus="inputFocus"
@blur="inputBlur"
v-model="reply_content"
placeholder="输入评论(Enter换行，Ctrl + Enter发送)"
></van-field>
</div>
const inputFocus = () => {
state.showBtn = true;
const el_input = document.querySelector(".reply-input"),
el_con = el_input.querySelector(".van-field__control ");
el_con.classList.add("active");
};
const inputBlur = () => {
const el_input = document.querySelector(".reply-input"),
el_con = el_input.querySelector(".van-field__control ");
!state.reply_content ? (state.showBtn = false) : null;
!state.reply_content ? el_con.classList.remove("active") : null;
};
const publishCommnet = (itemId) => {
api.publish(state.reply_content, [], itemId).then((res) => {
showComment(itemId, true);
});
};
总结
本次分享我们实现了沸点发布评论的新功能，在这里我们也仅仅是实现了主要功能，关于一些细节方面这里就不再过多涉及了，感兴趣的朋友可以拿到源码后自行研究和补充。今天的分享就到这里了，喜欢的朋友欢迎点赞关注加评论，谢谢。
