<script>
export default {
  components: {},
  data() {
    return{
        total: 100,
        getData: function($event) {
            console.log($event)
        },
        changePage: function($event){
            console.log($event)
        }
    }
  }
}
</script>

# Page 分页
当数据量过多时，使用分页分解数据。

## 基础用法
:::demo 使用`f-icon`嵌入图标
````html
<efly-page size="small" :list="[5,10,20,50]" :total="0" :count="10" @change="getData($event)"></efly-page>
````
:::

## 用法二
:::demo 使用`f-icon`嵌入图标
````html
<efly-page :list="[5,10,20,50]" total="100" :count="10" type="two"></efly-page>
````
:::

## 用法三
:::demo 使用`f-icon`嵌入图标
````html
<efly-page :list="[5,10,20,50]" total="100" :count="10" type="three"></efly-page>
````
:::

## 用法四
:::demo 使用`f-icon`嵌入图标
````html
<efly-page :list="[5,10,20,50]" total="100" :count="10" type="four"></efly-page>
````
:::

## 尺寸
:::demo 使用`f-icon`嵌入图标
````html
<efly-page :list="[5,10,20,50]" total="100" :count="10" @change="changePage($event)"></efly-page>
<efly-page :list="[5,10,20,50]" total="100" :count="10" size="small"></efly-page>
<efly-page :list="[5,10,20,50]" total="100" :count="10" size="mini"></efly-page>
````
:::



## 参数说明
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| size     | 大小   | String  |     small / mini        |    -     |
| list     | 可选显示数据量   | Array  |     -        |    [5, 10, 20, 50]     |
| count     | 默认显示数据量   | Number  |     -        |    10     |
| total     | 总数据量   | Number  |     -        |    -     |
| type     | 类型   | String  |     one/two/three        |    one     |


## 事件
| 事件名称      | 说明    | 回调参数   
|---------- |-------- |---------- |
| change    | 分页变化事件   |  -  |
