<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">Pagination</div>
    </div>
    <h3>基本示例</h3>
    <h4>default</h4>
    <WingBlank>
      <Pagination :total="5" @onChange="changePage"></Pagination>
    </WingBlank>
    <h3>自定义文案</h3>
    <h4>locale</h4>
    <WingBlank>
      <Pagination :total="5" :locale="locale" :current="3"></Pagination>
    </WingBlank>
    <h3>自定义模式</h3>
    <h4>简洁模式</h4>
    <WingBlank>
      <Pagination :total="5" simple></Pagination>
    </WingBlank>
    <h4>数字模式</h4>
    <WingBlank>
      <Pagination :total="5" mode="number"></Pagination>
    </WingBlank>
    <h4>圆点模式</h4>
    <WingBlank>
      <Pagination :total="5" mode="pointer"></Pagination>
    </WingBlank>
    <h3>自定义状态</h3>
    <h4>禁用状态</h4>
    <WingBlank>
      <Pagination :total="5" disabled></Pagination>
    </WingBlank>
  </div>
</template>
<script>
export default {
  data () {
    return {
      locale: {
        prevText: '上一页',
        nextText: '下一页'
      }
    }
  },
  methods: {
    changePage (page) {
      console.log('当前页：', page)
    }
  }
}
</script>