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

大体逻辑是

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
         	//@成功之后要做的事情
        }
      }
    });