插件名称 | vue-paginate-al |
---|---|
发布时间 | 2020年12月18日 |
插件作者 | alziqziq |
Paginate Al是用于Vue.js组件的简单但高度可定制的分页组件。
npm install --save vue-paginate-al
<template>
<div>
// example 1
<vue-paginate-al :totalPage="10" @btnClick="goToFunction"></vue-paginate-al>
// example 2 => with background color
<vue-paginate-al :totalPage="15" activeBGColor="success" :withNextPrev="false"></vue-paginate-al>
// example 3 => with single data
<vue-paginate-al :totalPage="20" :myData="'myname'" @btnClick="goToFuncWithData"></vue-paginate-al>
// example 4 => with multiple data
<vue-paginate-al :totalPage="20" :myData="['myname', 'myemail']" @btnClick="goToFuncWithMultipleData"></vue-paginate-al>
</div>
</template>
<script>
import VuePaginateAl from 'vue-paginate-al'
export default {
name: 'App',
components: {
VuePaginateAl
},
methods : {
goToFunction : function(n)
{
console.log(n);
},
goToFuncWithData : function(n, data)
{
console.log(n, data);
},
goToFuncWithMultipleData : function(n, data)
{
console.log(n, data[0], data[1]);
}
}
}
</script>