vueプロジェクトでは、ctrl+fの検索機能を実現します。

今回のプロジェクトの中で一つの検索機能を作ることに出会いました。プロジェクトはvueで、しかも携帯端末です。この検索機能の実現とどのようなことができるのかについては、底がないです。インターネットで検討してみました。皆さんの解決方法はそれぞれ特色があり、第三者カバンを導入したのがあります。しかし、私はvueの中でこのような方法はあまりにも煩わしいと思います。しばらくの間の調査と思索を経て、自分で簡単な方法を書いて、自分の考えを記録しました。

第一歩
製品の一万種類の奇妙な要求を明確に求める。
開発にとって、自分が何を必要としているのかを知るべきです。何も必要としないで、pmの需要を理解して、機能を最もueに合うように表現します。今回の機能需要は非常に簡単で分かりやすいです。検索ボックスの下に文章があります。検索ボックスの入力時に動態的に赤い表示があります。
第二のステップ
霊感を求めて助けてください。
開発経験のある人にとっては、自分の以前のコードを多重化すれば問題が解決できるかもしれませんが、初めて開発した私のようなチキンは、検索機能の実現には心当たりがありませんでした。このような身近にある機能は、具体的な実現プロセスを詳しく考えたことがないです。幸い、現代人の視野はサーチエンジンの視野です。バイドゥに行って一周した後、いろいろな方法を見ましたが、共通点があります。複雑すぎて、私が見るまではちょっと使いたくないです。コードが成功したら大丈夫という三流選手ですが、複雑すぎてコードが一日の気分に影響しますので、もっと簡単な方法を選びました。
第三歩
開発バグに入る無数の奇妙な製法
まず私のコード構造は以下の通りです。

<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"> //      ，          datelist  lawContent  
   <div id="content" v-if="datelist" v-html="changeColor(datelist.lawContent)"></div>
  </div>
 </div>
</template>

検索内容が対応内容を赤色にした関数は、changeColorです。

changeColor(item) {
  let searchitem = this.searchitem;  //          
  if (searchitem !== '') { //       ，        
   return item.replace(new RegExp(searchitem, 'g'), '<a style="color:red" >' + searchitem + '</a>');
  } else {
   return item;
  }
 },

ここで、動的な入力の赤い検索語の機能はすでに完了していますが、検索ボックスにはもう一つの回車事件があると思います。実際には少し使うべきです。例えば、最初のキーワードにジャンプするなど、この時、私はまた不思議な方法を見ました。document.getElementsByTagName("a").scrollIntoView();ページがスライドに対応できる時、scrollIntoViewは元素に対してスライドしてページの頂部（デフォルト）を滑ることができます。パラメーターによってfalseに対応元素に最後の部分を割り当てられます。元のjQueryだけをサポートします。問題が発生しました。上にそんなに多くのaラベルを交換しました。どうやって彼らが一列に並んで呼び出されますか？もちろん遍歴するしかないですが、jQueryの中でeqのようなセレクタがないです。どうやってjsに私が探しているのがn番目のaタグなのかを教えてくれますか？

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;
     }
    }
   },

getElementsByTagName(“a”)は、指定された署名を有するオブジェクトのセットを返した。配列のシーケンスを呼び出すことにより、方法の逐次呼び出しが完了します。
これで、この簡単なページの機能は基本的に実現されました。
ソース

<script src="../axios/axios.js"></script>
<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>
<script>
 require('../utils/js/jquery.min.js');
 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の検索内容については以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。