vue簡易版分頁器封裝

2022-06-28 01:48:10 字數 2058 閱讀 8700

設計思路:

樣式思路:

(1)設定乙個大盒子,裡面有三個子盒子,左右兩邊盒子用於放箭頭,中間用於放頁碼

(2)設定個啟用狀態的class給當前頁碼器,突出它的樣式;

**邏輯思路:

(1)首先初始化時根據父元件傳進來的分頁器的長度,初始化分頁器的盒子個數,例如上面我的初始化分頁器盒子是6個;

(2)點選向右按鈕,盒子中的數字加一,並且樣式啟用為下乙個頁碼

(3)點選向左按鈕,與向右按鈕邏輯相反即可;

(4)根據父元件傳入的最大頁碼數,設定頁碼數字增加大一定數字時停止增加,或者減少到1時停止減少;

第(4)步的演算法:

this.changeindex>=1就是使用者移動的距離大於等於1的情況下才可以向後退一格

**:

<

template

>

<

div

class

="pagination"

>

<

span

class

="arrow-outer"

:plain

="true"

@click

="pre()"

>

<

li class

="arrow-left"

>

li>

span

>

<

span

class

="mid"

>

<

li v-for

="(index,item) in arr"

:key

="index"

:class

="[((nowpage-changeindex)==index) ? 'pageactive' : 'page']"

@click

="getindex(index)"

>}li

>

span

>

<

span

:plain

="true"

class

="arrow-outer"

@click

="next()"

>

<

i class

="arrow-right"

>

i>

span

>

div>

template

>

<

script

>

export

default

, total:

},data()

},methods:

},getindex(index) ,

//next()

else, '

到頭了,兄弟')

])});}}

},//pre()

else, '

到頭了,兄弟')

])});}}

}},

mounted() ,

}script

>

<

style

>

.pagination

.pagination span

li .arrow-left

.arrow-right

.arrow-right:hover

.arrow-left:hover

.arrow-outer

.mid

.page

.pageactive

@media screen and (max-width:768px)

.pagination

} @media screen and (min-width:768.1px)

} @media screen and (min-width:1366px)

} .page:nth-child(1)

style

>

檔案上傳簡易版

以下是index.jsp的核心 後台servlet核心 先獲取所接收檔案要儲存的路徑 string path getservletcontext getrealpath imgs 檔案上傳需要臨時目錄 如果不指定,那麼該目錄就是tomcat temp file tempdir new file d ...

許可權設定(簡易版)

我們有乙個表actions是用來設定對選單或者資料進行增刪改查,預覽審核等等許可權的二進位制值,許可權判斷採用二進位制比較,例如乙個使用者對入庫表的action二進位制值為110,10為預覽,110 10 010 那麼他有預覽的許可權 欄位名描述 menu name 選單名dataset name ...

簡易版推箱子

最近學了一些c語言的視覺化程式設計,因此編了小遊戲玩玩,途中也遇到了一些問題,要記得放的時候要把存在資料夾裡,這些可以只寫相對路徑,不然如果直接寫相對路徑而又忘記把放在資料夾裡就不能夠顯示出想要的結果。廢話了這麼多,是時候上 了 include include includeimage backim...