export default {
data() {
return {
datelist: null,
searchitem: '',
searchnum:null,
searchhead:0,
};
},
created() {
this.datelist = JSON.parse(sessionStorage.getItem('lawcontent'))
console.log(this.datelist.lawTypeName)
},
methods: {
changeColor(item) {
let searchitem = this.searchitem;
console.log(this.datelist.lawTypeName);
if (searchitem !== '') {
return item.replace(new RegExp(searchitem, 'g'), '<a style="color:red" id="seach" >' + searchitem + '</a>');
} else {
return item;
}
},
submit(){
let num = document.getElementsByTagName("a").length; //获取所有a标签的数量，这个页面所有的a标签都是由查询替换获得的，所以a标签的数量可以当场查询到关键词的数量
if(num != 0){ //如果查询关键词存在，跳到第一个关键词的位置，标头增1，走满一圈归0
document.getElementsByTagName("a")[this.searchhead].scrollIntoView(); //scrollIntoView方法只在原生document中可以使用，jquery中没有这个方法，参数默认是true，将这个元素置于页面第一行（如果页面可以滑动函数才生效）
if(this.searchhead < (num - 1)){
this.searchhead += 1;
}else if(this.searchhead == (num - 1)){
this.searchhead = 0;
}
}else{
}
},
}
};
</script>
<style scoped>
#content {
white-space: pre-line;
}
.header {
width: 100%;
top: 0px;
background: white;
padding: 8px 8px;
border-bottom: 2px solid #f5f5f5;
}
.search-total {
width: 100%;
height: auto;
}
.search_model_zt {
height: 35px;
background: #fff;
}
.search {
width: 100%;
/* margin: auto; */
border-radius: 30px;
background-color: #f3f3f3;
height: 32px;
position: relative;
}
.search_icon {
position: absolute;
left: 5%;
top: 7px;
width: 16px;
height: 16px;
}
.search_icon img {
width: 100%;
height: 100%;
}
.search_input {
margin-left: 14%;
}
.search_input input {
background: none;
border: none;
height: 34px;
width: 100%;
}
input {
outline: none;
border: 0;
background: none;
font-size: 0.9rem;
}
.law-content {
width: 100%;
height: calc(100% - 95px);
padding: 27px 18px 40px 16px;
position: fixed;
overflow: auto;
}
.law-content div {
color: rgba(85, 85, 85, 1);
font-size: 14px;
}
</style>
总结
到此这篇关于在vue项目实现一个ctrl+f的搜索功能的文章就介绍到这了,更多相关vue ctrl+f 搜索内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
