改@用户功能为动态

前言

做一个issue,要求是这样的
改@用户功能为动态_第1张图片
他说的@是类似于这样的
改@用户功能为动态_第2张图片
当输入@时,会弹出可以@的用户列表。

解决

一开始想到从html层面解决,看看input标签有没有可以限制输入内容。

查到可以添加几个事件,上述代码为限制input输入内容为数字。onkeyup事件每当输入就会执行,我们设置一个方法,替换非数字为空。里面检测非数字用到了正则表达式。

onpaste事件每当粘贴时执行,我们设置同样的方法。

oncontextmenu事件很少用到,感兴趣的可以了解了解。

改@用户功能为动态_第3张图片

修改为替换规则为当检测到 '@'时替换为空。测试输入并没有弹出可以@的用户列表。这种禁止输入并不是输入@没有反应,而是输入@会出现0.5秒然后再消失。
接下来就是把这种事件变为动态,当为合作伙伴时,启用事件,当部位合作伙伴时,不启用事件。

改@用户功能为动态_第4张图片

当时这么写的,然后没有生效,没找到问题。然后仔细一想,发现如果写出来也不太对,如果输入一个邮箱地址的话,我们这样就没法输入@符号了,我们只想他不弹出用户列表,最后导致无法输入@符号了。

老师也建议这么写不太好,这相当于加入一个监听,当监听到输入@符号时,将@符号用空替换。而弹出用户列表相当于另一个监听,当监听到@符号时去弹出用户列表。两个监听事件可能并没有影响,所以不起作用。

改@用户功能为动态_第5张图片

如果不想弹出用户列表,我们把用户列表隐藏掉就好了。
找到相关html代码,然后加上*ngIf = "false",结果并没有隐藏掉,一度怀疑自己找错相关html代码了。

改@用户功能为动态_第6张图片

问了老师后,发现这是一个angular的ng-template模版标签,ng-template并不会被页面渲染,而是会被替换成我们定义的要显示的实际内容。所以ngif并没有生效。

改变思路,我们将@的用户列表设置为空,这样其实当输入@时也会触发弹出用户列表事件,但是用户列表为空,所以看起来是不显示的。

能@一个人,不仅仅当输入@时能弹出用户列表,还要在提交输入内容时检测到含有'@XXX(能@的人名)'时要提醒被@的人。这样设置也可以去除当提交时@功能的执行。

你可能感兴趣的