vue.js中使用scrollIntoView方法不生效(已解决)

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

// 高亮搜索词
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加上,就可以解决啦,好的,完结。撒花。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值