Vue實現搜尋功能
阿新 • • 發佈:2022-05-12
template
<template> <div> <div class="header"> <div class="search-total"> <div class="search_model_zt"> <div class="search"> <div class="search_icon"><img :src="require('./img/search.png')"/></div> <div class="search_input"><input v-model="searchitem" @keyup.enter="submit" placeholder="搜尋條文"/></div> </div> </div> </div> </div> <div class="law-content"> <div id="content" v-if="datelist" v-html="changeColor(datelist.lawContent)"></div> </div> </div> </template>
JS
<script> export default { data() { return { datelist: null, searchitem: '', searchnum: null, searchhead: 0, }; }, created() { this.datelist = { lawContent: '<div>測試<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><br/><span>是時時刻刻時刻勝利了</span><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span>' + '<div>測試<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/><br/><span>是時時刻刻時刻勝利了</span><span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span><br/>' + '<span>是時時刻刻時刻勝利了</span><br/><span>是時時刻刻時刻勝利了</span></div>', lawTypeName:'測試', } 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() { // 獲取所有a標籤的數量,這個頁面所有的a標籤都是由查詢替換獲得的,所以a標籤的數量可以當場查詢到關鍵詞的數量 let num = document.getElementsByTagName("a").length; // 如果查詢關鍵詞存在,跳到第一個關鍵詞的位置,標頭增1,走滿一圈歸0 if (num != 0) { document.getElementsByTagName("a")[this.searchhead].scrollIntoView({block: "start", behavior: "smooth"}); if (this.searchhead < (num - 1)) { this.searchhead += 1; } else if (this.searchhead == (num - 1)) { this.searchhead = 0; } } else { // } }, } }; </script>
CSS
<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>