今天做项目的时候遇到一个很合理的需求，搜索页面文本内容，对搜索到的匹配内容进行高亮显示以及页面滑动定位到第一处的位置。
这个我一看很合理啊，于是动手我就开始打代码。

// 高亮搜索词
brightenKeyword(val, keyword) {
  const Reg = new RegExp(keyword, 'ig');
  let res = '';
  if (keyword !== '') {
     res = val.replace(Reg, `<mark>$&</mark>`);
     return res;
   }else{
     return val;
   }
},

这下高亮已经完成了，就剩下滑动定位啦，那我一下子就想到了scrollIntoView，这不是很快就搞定了。

getPosition(){
	let num = document.getElementsByClassName('highText').length;
	if(num != 0){
	  this.$nextTick(()=>{
	    document.getElementsByClassName('highText')[0].scrollIntoView({ behavior: 'smooth' });
	  })
	}else{
	  this.$message.warning('没有搜索到')
	}
}

这写好了，不就直接调用吗，结果不生效！！！

<t-input v-model="filterWord">
	<t-button @click="getPosition()">搜索</t-button>
<t-input>

<div v-html="brightenKeyword(text,filterWord)"></div>

data(){
	return {
		filterWord: '',
		text: '需要搜索的文本'
	}
}

我一下子还以为我哪个单词写错了，看了一下也没有报错，但是没有效果。我就去查，结果有文章说在vue里面要等数据加载好，要用nextTick方法，setTimeOut方法，我用上了，结果没有用。我人傻了！
后面我们加上enter也要触发搜索，我就加上的enter方法。神奇的是居然可以，enter键居然可以，按钮依旧不行。

<t-input v-model="filterWord" @enter="getPosition()">
	<t-button @click="getPosition()">搜索</t-button>
<t-input>

我就只能合理怀疑各种，去尝试解决。
结果还真试出来了。

<t-input v-model="filterWord" @enter="getPosition()">
	<t-button @click.stop="getPosition()">搜索</t-button>
<t-input>

要@click.stop="getPosition()"啊，stop加上，就可以解决啦，好的，完结。撒花。