iView是一個(gè)很好的vue框架赏酥，但是因框架比較新医增，使用的案例比價(jià)少，官網(wǎng)上雖有api谅河，但是api應(yīng)用案例也比較少咱旱，下面來說下“Page分頁”組件的使用，但我們屬性了這個(gè)組件绷耍，會(huì)感覺到其實(shí)框架的套路也就這樣吐限，用法差不多的。
這里給出Page分頁網(wǎng)址：https://www.iviewui.com/components/page
Page組件給出的api有很多锨天，但是api的使用案例去只有幾個(gè)毯盈，如下圖
只有這些信息肯定是不夠的，在實(shí)際的項(xiàng)目開發(fā)上病袄，使用一個(gè)分頁時(shí)搂赋，我們是不是該去綁定
1.關(guān)于"當(dāng)前頁":
- 如何動(dòng)態(tài)的綁定當(dāng)前頁
- 怎么監(jiān)聽當(dāng)前頁的變化
2.關(guān)于"當(dāng)前條數(shù)"
- 如何動(dòng)態(tài)的綁定當(dāng)前頁
- 怎么監(jiān)聽當(dāng)前條數(shù)的變化
下面來看看例子：
對(duì)于屬性current赘阀、total、page-size的使用：
從api可知current脑奠、total基公、page-size的類型都是Number,所以我們?cè)赿ata中定義時(shí)應(yīng)該定義為number類型，如下：
page:{
index:1,
size:10,
total:50
},
1.如何做到“當(dāng)我們修改自己定義的page對(duì)象里的數(shù)據(jù)宋欺，組件上的數(shù)據(jù)跟著改變”
這就得動(dòng)態(tài)的去綁定上面的設(shè)置的3個(gè)值轰豆，api給出是這樣的：
| 屬性 | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| current | 當(dāng)前頁碼，支持 .sync 修飾符 | Number | 1 |
| total | 數(shù)據(jù)總數(shù) | Number | 0 |
| page-size | 每頁條數(shù) | Number | 10 |
我們的實(shí)際應(yīng)用：
:total="page.total" :current="page.index" :page-size="page.size"
其中page.total齿诞，page.index酸休，page.size是我們?cè)赿ata里定義的變量，如圖二
當(dāng)然我們也可以不動(dòng)態(tài)直接去設(shè)置如:total="1" :current="10" :page-size="50"但是這樣在實(shí)際的開發(fā)上是不合用的祷杈。
對(duì)于屬性on-change斑司、on-page-size-change的使用：
2.如何做到“當(dāng)我們修改組件上的條數(shù)或當(dāng)前頁時(shí)，我們自己定義的page對(duì)象里的數(shù)據(jù)也會(huì)實(shí)時(shí)的跟著跟著改變”
這就得在組件上定義函數(shù)去監(jiān)聽但汞，而組件是經(jīng)封裝過的宿刮，它已經(jīng)暴露給我們監(jiān)聽的接口了，api上是這樣寫的
| 事件名 | 說明 | 返回值 |
|---|---|---|
| on-change | 頁碼改變的回調(diào)私蕾，返回改變后的頁碼 | 頁碼 |
| on-page-size-change | 切換每頁條數(shù)時(shí)的回調(diào)僵缺，返回切換后的每頁條數(shù) | page-size |
我們的實(shí)際應(yīng)用：
@on-change="pIndexChange" @on-page-size-change="pSizeChange"
其中pIndexChange和pSizeChange是我們?cè)趍ethods中定義的方法，如圖二
每當(dāng)切換前前頁碼時(shí)踩叭，pIndexChange函數(shù)都會(huì)監(jiān)聽新的頁碼磕潮，然后我們把它賦值給this.page.index ，這樣就做到了同步啦容贝。
對(duì)于屬性page-size-opts揉抵、placement的使用
當(dāng)然這里的"'top'"和"[10,20,50,100,200,500]"也可以方法data里面。
注意placement值的寫法嗤疯，該屬性接收的值是字符串，所以我們需要在裝屬性值的字符串里再加多一對(duì)引號(hào)闺兢。
對(duì)于屬性show-total茂缚、show-elevator、show-size屋谭、show-size的使用：
simple脚囊、show-total、show-elevator桐磁、show-size悔耘、show-size的類型是Boolean，屬性值為布爾值的用法有3種：
1.當(dāng)屬性為布爾值時(shí)我擂，只要寫出該屬性衬以，該屬性值就為true缓艳，所以當(dāng)我們要用法這個(gè)屬性時(shí)，直接寫在組件上便可以看峻，如圖二和下圖的“1”用法阶淘；
2.如果我們想把屬性寫在組件上，在來設(shè)置它的值呢互妓？如下圖的“2”用法溪窒；
3.如果我們想動(dòng)態(tài)的去設(shè)置該值呢？當(dāng)然也是可以把屬性值寫到data里面冯勉，如下圖的“3”用法
到這里我們可以注意到澈蚌，不管屬性的是什么類似的值，在綁定到組件時(shí)灼狰，我們都要把它放到字符串里的宛瞄。
關(guān)于Page組件的使用大概就這些：
關(guān)于屬性的使用：
:屬性名 = “直接設(shè)置/在data里設(shè)置”
props屬性都是可以動(dòng)態(tài)綁定的，動(dòng)態(tài)綁定的方法就是在該屬性前加：號(hào)伏嗜，然后等于一個(gè)data里面定義的變量坛悉，變量的值是什么呢？字符串承绸？對(duì)象裸影？布爾值？這就要看api里的的“類型”這一欄的規(guī)定啦军熏。
關(guān)于方法的使用：
@事件名=“函數(shù)”
函數(shù)在定義時(shí)注意查看api的參數(shù)和返回值
關(guān)于默認(rèn)值的使用
當(dāng)我們寫上組件時(shí)轩猩，什么屬性都不寫時(shí)，如“圖五”
當(dāng)我們寫上組件時(shí)荡澎，寫上"show-total, show-size, show-elevator"屬性(即設(shè)置這些屬性值為true)均践，
因?yàn)?br>
show-total屬性與total屬性相關(guān)聯(lián)，
show-size屬性與page-size, page-size-opts, placement屬性相關(guān)聯(lián)摩幔；
show-elevator屬性與curren屬性相關(guān)聯(lián)
所以
當(dāng)我們寫上"show-total, show-size, show-elevator"屬性時(shí)會(huì)自動(dòng)綁定上
“curren, total, page-size, page-size-opts, placement”的默認(rèn)值如“圖七”
