vue分頁外掛程式(已發布到npm上)

2021-09-25 18:51:18 字數 1099 閱讀 1710

本來想著分頁的外掛程式並不難做,但是考慮到以後會應用到自己的專案上,考慮了挺多的,所以還是花了一天的時間。

我的分頁外掛程式一共分為三個層次

第乙個層次 : 頁數小於等於5

呈現的狀態: < 1 2 3 4 5 >

這個層次的邏輯最簡單,僅僅是改變頁碼的樣式就可以,邏輯很清晰

第二個層次: 頁數大於5小於等於9

這個層次會根據頁碼的切換會呈現兩種不同的狀態

第一種狀態: < 1 2 3 4 ··· 9 >

第二種狀態 < 1 ··· 4 5 6 7 8 9 >

第三個層次: 頁數大於9

這個層次會根據頁碼的切換呈現出三種狀態

第一種狀態: < 1 2 3 4 ··· n >

第二種狀態: < 1 ··· 8 9 10 11 12 ··· n>

第三種狀態: < 1 ··· n-3 n-2 n-1 n >

0">}}

5 && pagerange <=9">

···}

}9">

···} 9 && soonshow">

···}

@font-face 

.paginate

.pages

.pages-container

.pages-container:hover .pages

.pages-container:hover .pages-soon

以上只發布一些核心的**,想要原始碼的同學可以到github上去下,

當然了,考慮到有些同學看太多的**會犯睏,我把我的外掛程式發布到npm上了,這是位址 裡面有比較詳細的使用說明,應該能夠基本滿足一些小專案的需求了。

上下效果圖吧

有什麼問題請在下方提問,我會盡量及時解答,如果寫的不好請不要噴,拒絕網路暴力。

發布外掛程式到npm上

1.建立檔案 mkdir model dao cd model dao npm init npm init會要求填寫一堆的資訊,這些資訊會在package.json裡體現,例如 bin author jc license isc dependencies 2.在model dao專案裡建立乙個ind...

vue外掛程式開發 npm發布

vue init webpack projectname執行專案 cd projectname npm install npm run dev 在 src 資料夾下面建 lib 資料夾,用於存放外掛程式。lib 資料夾下再建 toast.js 和 toast.vue 兩個檔案。整個專案目錄如下所示 ...

封裝vue元件並發布到npm上

1.使用webpack 模板建立乙個vue專案,命令 vue init webpack kingtreebtn 新建專案目錄如下 2.在src目錄下新建lib目錄存放元件原始碼 3.元件封裝完後新建元件出口檔案index.js,檔案內容如下 4.修改package.json檔案 5.修改webpac...