Vue ADS Pagination

Vue pagination component demo

by vladis1906

HTML

<script src="https://unpkg.com/vue-ads-pagination@latest/dist/vue-ads-pagination.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-ads-pagination@latest/dist/vue-ads-pagination.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<div id="app" class="m-6">
    <div class="mb-6">
        <h3>
            Pagination with custom style
        </h3>
        <vue-ads-pagination 
            :total-items="200"
            :page="page"
        >
            <template
                slot="buttons"
                slot-scope="props"
            >
                <vue-ads-page-button
                    v-for="(button, key) in props.buttons"
                    :key="key"
                    v-bind="button"
                    :class="{'bg-yellow-dark': button.active}"
                    @page-change="page = button.page"
                    @range-change="start = button.start; end = button.end"
                />
            </template>
        </vue-ads-pagination>
    </div>
</div>

Vue

const VueAdsPagination = window["vue-ads-pagination"].default;
const VueAdsPageButton = window["vue-ads-pagination"].VueAdsPageButton;

new Vue({
    el: "#app",
    components: {
       VueAdsPagination,
       VueAdsPageButton,
    },
    
    data: {
        page: 0,
        start: 0,
        end: 0,
    },
    
    methods: {
    	pageChange (page) {
      		this.page = page;
        },
        
        rageChange (start, end) {
        	this.start = start;
            this.end = end;
        }
    },
});