ant design vue Pagination 样式风格

ant design vue Pagination 除了普通大小还提供了简洁和迷你两种风格样式。

迷你风格(node.js webpack方式)

<template>
  <div class="itxst-mini">
    <a-pagination size="small" :total="100" />
    <a-pagination size="small" :total="100" showSizeChanger showQuickJumper />
    <a-pagination size="small" :total="100" :showTotal="total => `Total ${total} items`" />
  </div>
</template>
<style scoped>
  .itxst-mini .ant-pagination:not(:last-child) {
    margin-bottom: 22px;
  }
</style>

迷你风格(浏览器方式)

例子

<style> 
    .itxst-mini .ant-pagination:not(:last-child) {
        margin-bottom: 25px;
    }
</style>

<div id="app">
  <a-locale-provider :locale="locales.zh_CN">
   <div class="itxst-mini">
      <!--风格1  www.antgit.com -->
      <a-pagination size="small" :total="100" :page-size="pageSize" v-model="current"></a-pagination>
      <!--风格2-->
      <a-pagination size="small" :total="100" :page-size="pageSize" v-model="current" show-size-changer show-quick-jumper v-on:show-size-change="onShowSizeChange"></a-pagination>
      <!--风格3-->
      <a-pagination size="small" :total="100" :page-size="pageSize" v-model="current" v-on:show-size-change="onShowSizeChange" :show-total="total => `总计 ${total} 条`" show-size-changer show-quick-jumper></a-pagination>
     </div>
   </a-locale-provider>
</div>
<script>
    const { LocaleProvider, locales } = window.antd;
    Vue.use(window['vue-dash-event']);
    var app = new Vue({
        el: '#app',
        data() {
        return {
            pageSize: 10,
            current: 3,
            };
        },
        watch: {
    pageSize(val) {
    console.log('pageSize', val);
    },
    current(val) {
    console.log('current', val);
    },
},
methods: {
    onShowSizeChange(current, pageSize) {
        console.log("onShowSizeChange",current, pageSize);
    },
},
    });
</script>

简洁风格（node.js webpack方式）

<template>
  <a-pagination simple :defaultCurrent="2" :total="50" />
</template>

简洁风格（浏览器方式）

<div id="app">
        <a-locale-provider :locale="locales.zh_CN">
            <div class="itxst-mini">
                <a-pagination simple v-model="current" size="small" :total="100" :page-size="pageSize"></a-pagination>
            </div>
        </a-locale-provider>
</div>
<script>
        const { LocaleProvider, locales } = window.antd;
        Vue.use(window['vue-dash-event']);
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    pageSize: 10,
                    current: 3,
                };
            },
            watch: {
                current(val) {
                    console.log('current', val);
                },
            }
        });
</script>