# Page 分页

## 概述

当数据量较多时，使用分页可以快速进行数据切换

## 使用指南

在.vue中引入组件

```javascript
<script>
    import iPage from 'iview-mpvue/dist/components/page/page'
    export default {
        components: {
            'i-page': iPage
        }
    }
</script>
```

## 示例

```markup
带有文字的按钮

<i-page :current="current" total="5" v-on:change="handleChange">
    <div slot="prev">Prev</div>
    <div slot="next">Next</div>
</i-page>

带有文字和图标的按钮

<i-page :current="current" total="5" v-on:change="handleChange">
    <div slot="prev">
        <i-icon type="return"></i-icon>
        上一步
    </div>
    <div slot="next">
        下一步
        <i-icon type="enter"></i-icon>
    </div>
</i-page>

隐藏数字

<i-page :current="current" total="5" :simple="true" v-on:change="handleChange">
    <div slot="prev">Prev</div>
    <div slot="next">Next</div>
</i-page>

只显示数字

<i-page :current="current" total="5" mode="number" v-on:change="handleChange"></i-page>

显示点

<i-page :current="current" total="5" mode="pointer" v-on:change="handleChange"></i-page>
```

```javascript
<script>
    export default {
        ...
        data() {
            return {
                current: 1
            }
        },
        methods: {
            handleChange (detail) {
                const type = detail.type;
                if (type === 'next') {
                    this.current = this.current + 1
                } else if (type === 'prev') {
                    this.current = this.current - 1
                }
            }
        }
    }
</script>
```

## API

Panel properties

| 属性      | 说明                            | 类型      | 默认值    |
| ------- | ----------------------------- | ------- | ------ |
| i-class | 自定义 class 类名                  | String  | -      |
| mode    | 类型，可选值为 button、number、pointer | String  | button |
| current | 当前页码                          | Number  | 1      |
| total   | 总页数                           | Number  | 0      |
| simple  | 是否隐藏数值                        | Boolean | false  |

Page events

| 事件名         | 说明                     | 返回值      |
| ----------- | ---------------------- | -------- |
| v-on:change | 切换页码时触发，返回 prev 或 next | { type } |