前端输入框简单实现检测@成员输入

大体逻辑是

1. 给input框添加一个input监听，并判断输入是否为@
2. 获取当前光标的位置，你输入的@肯定在光标之前，且肯定是最后一个@
3. input输入的内容换行可以被认为空格，需要进行全局替换
4. 判断@成功的逻辑分为两部分，前方一般来说是为空或者@index的下标为0，后方的判断是到下一个间隔（空格）之间不能存在@，这个主要看产品需求，一般情况是这样

     //获取dom，并添加input监听this.$refs.input.addEventListener('input', (event) => {//判断if (event.data === '@') {//获取当前焦点位置const selectionStart = event.srcElement.selectionStart;//将输入值的换行替换成 空格const value = this.newComment.replace(/[\r\n]/g, ' ');//获取到当前焦点位置最后一个@const start = value.lastIndexOf('@', selectionStart);//获取从焦点位置后第一个空格的下标const fistSpaceIndexFromStart = value.indexOf(' ', selectionStart);//能够找到就用第一个空格的下标否则就找到最后const end = fistSpaceIndexFromStart > -1 ? fistSpaceIndexFromStart : value.length;//获取到@之后到下一个间隔之间的内容const termWithTrigger = value.substring(start, end);//前方的判断-不包含index为0的情况const startBeforeHasSpace = start > 0 && value[start - 1] === ' ';if ((startBeforeHasSpace || start === 0) &&!termWithTrigger.includes(' ') &&!termWithTrigger.includes('@', 1)) {//todo//@成功之后要做的事情}}});