一次改bug提PR的全过程,交作业啦

群聊入口:https://mallchat.cn/

阿斌最近不是做了一个群聊网站吗

虽然我错过他的发布会了

但是后来刷到视频我觉得好玩

赶紧来看一看

没想到呢我一来他就给我留了个作业

大家看他说点击回复按钮

光标没有聚焦输入框

后来呢我就找没找着那个回复按钮

他说鼠标放在消息这这就有一个

大家看啊

他点一下回复

还要再去文本框里再点一下

才能输入文字

所以呢我们今天就把这个作业交上

我们先fork一下它前端这个代码

这个代码我之前看了哈

这个问题虽然并不复杂

但是我用的第一个方法还是有bug

所以我想跟大家分享一下

首先呢我们先fork一下

然后我们把项目克隆下来哈

正常大家用

终端克隆就行

我之前分享过这个(alfred的)插件

直接替我们输入命令

好嘞然后我们install一下

再打开这个项目

好然后我们怎么找这个代码呢

我发现啊

之前悬浮在这的时候

大家看这有一个回复俩字

所以呢我就在这全文搜了一下回复

就直接就找到这个代码了

大家看其他的这些都不是

只有这个是带title等于回复的

所以肯定是这个了

然后呢这里边竟然没有click事件

但是呢

我找到一个自定义的指令v-login

然后看他代码发现他是做了一个

登录的判断哈

所以我们就不管登录判断了

直接找这个方法就可以了

在这里

这个方法呢大家看它也很简单

就是给一个全局的store设置了一个变

量什么也没做

那我就心想

我就直接在这让文本框

获取焦点就可以了呗

后来我发现不行

为什么呢

因为他这个列表是一个子组件

他在这个子组件里点这个回复

他没法直接拿到外边这个文本框

后来怎么办呢

我就想既然他在这对他进行赋值了呢

那肯定是

在这个文本框

这个组件要取这个变量吗

所以呢我们再回到项目的文件结构里

大家看这里有个chat list

我们把它收起来

这有个chat box

这个就是他父级这个组件

然后呢我们打开这个文件

然后呢我们

在这里边搜一下搜这个

currentMsgReply

在这里大家看 他做了一个计算属性

然后呢变量名还叫这个名

只不过他从这

重新取了这个全局store里的这个变量

然后呢我们再去找这个在哪用的

我们要去找vue代码代码(口误,是找模板代码)

在这里大概它有个div、v-if

然后呢下边就是input框了

也就是上面这个东西

所以呢其实重要的就是这个变量

我们再来看一下这个变量

就这个computer的属性啊

那我就想我们能不能

在这监听这个变量

或者监听这个computed的就好了

所以呢我在这试了一下哈

先写一个watch

看一下watch上面声明了没有

有了

watch这个就行

newValue、oldValue我们就不写了哈

因为我们不需要

我们现在这打印一下

然后呢我们把项目跑起来按

npm run dev

好然后呢我们用本地的

大家看

他说这userStore没有初始化啊

后来我发现其实是因为

这个computed的属性里边用了

user style

但是呢这userStore到是在下边声明的

所以它在这儿

用watch就不行

我们得把watch往下放

我们先把它剪切走

然后呢找到这个userStore

到声明的地方看看

在这里

嗯我们就放在这行下边吧

我们再来试一下

哎可以了是吧

然后我们先清空一下空台

然后点一下回复

看看可以了

然后接下来呢我们就在这里边做一个

获取焦点就可以了

其实我发现他这里边

其他地方有相关的代码

在这里大家看

setTimeout让这个文本框获取一个焦点

所以呢我们就直接把这个拿过来

复制然后呢找到我们刚才那个方法

应该是在下边(在这里)

好我们再来试一下啊

点下这,大家看好像是可以了哈

但是呢注意

如果再点一下同样的回复就没了

为什么呢

因为第二次点的话这个变量没有变

所以他就没有触发这个

这也是我视频开头说的第一个方案

有问题那怎么办呢

我们就不能用这个watch了

把它先删掉啊

怎么办呢

因为它这个是一个子组件

所以呢我们可以在这个子组件里边

触发一个事件

我们先在上面声明一个事件啊

在这里吧

在这里对吧

他点这个按钮会走这个方法

我们就在这个方法下边

我们直接在这触发这个事件

startReplying

然后呢我们可以把这个变量传过去

这样的话呢

我们在

外部这个就直接写一个事件就可以了

找到这个的vue代码,这儿呢

chat list

我们叫 starReplying

然后这里边指定一个方法

正常的话

这个方法是用来处理

当用户点击了回复按钮的一些逻辑

但是目前呢

我们就简单的叫focusMsgInput吧

所以呢我们需要把这个方法写出来

就在这吧

const focusMsgInpuf

我们先写到这哈

然后把刚才的这个拿过来

然后呢

把它放到上面

因为刚才还有个地方用这个settimeout

搜一下settimeout在这里

我们把它放到上面一点

放到这

然后呢在下边调用

它这也在调用就可以了

再来试一下

报错

sorry,这语法不对

const 它 等于

箭头函数吧

再来试一下啊

点回复当然可以了

重复点击也可以了

好最后咱们开始交作业哈

我们提交一下代码然后提一个PR

个也改了这几个,(新增了)package-lock

这个(package-lock)就先不加上了

你就直接把src底下的提交一下

然后呢commit,叫fixbug

当回复消息时

捕获焦点

好,push一下

好可以了

然后呢我们回到库里边

刷新一下

好看到这个提交了吗

在这点一下

好然后 我们检查一下

然后创建PR

好这里边我们简单描述一下

用户点击回复按钮时

消息文本框

无法

获取焦点

提交

OK

这样我们就等着阿斌来批作业就可以了

最后更新于