关于掘金评论区域点击切换的到评论输入框的实现|青训营笔记

这是我参与[第四届青训营]笔记创作活动的第20天

最近在做这个评论区组件的时候遇到了一点难题，中间尝试过一些方法，后来终于解决了，还是自己经验不足的原因

这个组件在点击的时候会切换到输入框，这里问题不大，遇到问题的是怎么切换回来

一开始我在页面上注册点击事件，通过布尔来控制v-show

window.addEventListener("click", this.handleWindowClick);

后来发现因为事件冒泡我点击textarea的时候window事件也会触发

中途我做了阻止默认事件等一系列事情

后来通过文本框聚焦 @blur事件来解决掉这个问题

后来又发现点击发表评论按钮时聚焦也会消失导致v-show运行盒子切换

后来通过查阅资料发现可以把click事件转换为 @mousedown.native，然后在函数buttonClick(event)中阻止默认事件

buttonClick(event) { event.preventDefault(); }

所以一个事件想不通的时候可以换一个思路

示例组件代码如下

<div class="beforeTextarea" v-if="!isShow" @click="handleDivClick"> <div class="contenteditable">输入评论(enter换行,Crtl+Enter发送)</div> </div> <div class="contentInput" v-if="isShow"> <el-input ref="input" @blur="handleWindowClick" type="textarea" :rows="2" :placeholder="placeholderTxt" v-model="textarea" > </el-input> <div class="publishedContent"> <div> <div class="expression"> <i class="iconfont icon-biaoqing"></i>表情 </div> <div class="img"> <i class="iconfont icon-tupian_huaban"></i>图片 </div> </div> <div> <div class="crtlEnter"><span>Crtl+Enter</span></div> <el-button size="small" @mousedown.native="buttonClick" type="primary" :style="{ backgroundColor: isDisabled, cursor: isCursor, }" >{{ buttonText }}</el-button > </div> </div> </div>

`export default { components: { commentList, }, data() { return { buttonText: "发表评论", disabled: false, textarea: "", isShow: false, form: { username: null, content: null, articleId: 1, }, }; }, computed: { isDisabled() { return this.textarea ? "rgb(150, 150, 248)" : " rgb(191, 191, 243)"; }, isCursor() { return this.textarea ? "pointer" : "text"; }, }, props: { placeholderTxt: { type: String, default: "请输入评论", }, },

methods: { async buttonClick(event) { event.preventDefault(); if (!this.textarea) { return; } const content = this.textarea; const username = "用户" + Math.floor(Math.random() * 100 + 100); this.form.username = username; this.form.articleId = this.$route.params.acticleId; this.form.content = content; this.buttonText = "提交中..."; await addComment(this.form); this.buttonText = "发表评论"; this.textarea = ""; }, handleDivClick() { this.isShow = true; }, handleWindowClick() { this.isShow = false; }, }, };`

最后我发现掘金可能不是这样做的