在vue專案中做乙個類ctrl f的搜尋功能

2021-10-03 06:02:19 字數 1858 閱讀 3990

這次在專案中遇到了乙個要做乙個搜尋功能,因為專案是vue的,而且是在手機端,所以對這個搜尋功能的實現和能做到什麼樣子都沒有底,在網上研究了一會,發現大家的解決方法都各有特色,有引入第三方包的,有遍歷的,確實都可以實現,但我覺得在vue中這樣的方法也太過繁瑣了,於是經過一段時間的查詢與思索後我自己寫了個簡單的方法,並記錄下自己思索的過程

第一步明確尋求

產品的一萬種奇怪要求

對於開發來說,應該要知道自己需要什麼,不需要什麼,理解pm的需求,把功能以最符合ue的樣子呈現出來,而這次的功能需求是非常簡單明瞭的,乙個搜尋框,底下是文章,搜尋框輸入的時候動態標紅,按下回車會跳到標紅的位置,簡單明瞭

第二步尋找靈感

第三步進入開發

bug的無數種奇怪煉成方式

首先我的**結構如下:

="header"

>

//頁面頭部,搜尋框部分

="search-total"

>

="search_model_zt"

>

="search"

>

="search_icon"

>

"require('img/search.png')"

/>

<

/div>

="search_input"

>

"searchitem" @keyup.enter=

"submit" placeholder=

"搜尋條文"

/>

<

/div>

<

/div>

<

/div>

<

/div>

<

/div>

="law-content"

>

//頁面內容部分,具體內容由後端傳入的datelist中的lawcontent提供

"content" v-if=

"datelist" v-html=

"changecolor(datelist.lawcontent)"

>

<

/div>

<

/div>

<

/div>

<

/template>搜尋內容把對應內容變為紅色的函式就是changecolor

changecolor

(item)

else

},

document.

getelementsbytagname

("a").

scrollintoview()

;

當頁面可以支援滑動時,scrollintoview可以把對於元素滑倒頁面頂部(預設),也可以通過引數賦值給false讓對應元素賦值到底部,僅支援原生js,jquery中沒有這個方法,那麼問題來了,我上面替換出了那麼多a標籤,怎麼能讓他們排好隊乙個乙個被呼叫了,那當然只能遍歷了,但是原生js中沒有jquery中eq那樣的選擇器,怎麼才能讓js知道我要找的是第n個a標籤呢

submit()

elseif(

this

.searchhead ==

(num -1)

)}},

原來,getelementsbytagname(「a」)返回的是帶有指定標籤名的物件的集合。通過對陣列的序列的呼叫就可以完成對方法的依次呼叫。

至此,這個簡單頁面的功能已基本實現,

原始碼

Vue專案中實現乙個日曆元件

本專案是乙個pc端的專案,使用已有的元件,沒有找到pc端的,所以需要自己寫乙個日曆。打卡詳情 mounted console.log this.selyear,this.selectedmonthdate this.getcurmonthdata this.selectedmonthdate met...

如何做乙個專案

早上上csdn瞧瞧,發現有位同學想在暑期做個論壇,想要點建議,相信有不少已經入門想有所提高的同學都有這個想法。那麼我就在此提幾點意見,大家可以討論討論。首先選專案,我覺得這位同學拿論壇入手是比較合適的,原因有這樣幾點 1 論壇的基本業務邏輯大家都很熟悉2 量不是很大,可以在兩個月內完成基本功能的實現...

在專案中解決的乙個死鎖問題

描述 finance 系統 呼叫 process 系統的時候發生死鎖。用 show processlist 可以看到存在status是 updating 的程序,而該程序就是發生了死鎖的sql。分析 問題產生的原因是 finance 系統在事務a中update了一條資料,並且這條資料已被加行鎖 pr...