1. vue-custom-pages

vue-custom-pages

vue-custom-pages

基于vue2.0实现的自定义分页

实现效果如下:

支持功能

- [x] 自定义分页条数
- [x] 跳转某一页

联系方式

- 微信:18888320271

快速上手

1. npm安装  `npm i --save vue-custom-pages`
2. main.js中引入 ` 
            import customPages from 'vue-custom-pages';
            Vue.use(customPages)
             `
3. 使用
  `
  <template>
      <div id="app">
        <vue-custom-pages :total="1000" active-color="red" page-size="20" show-count v-model="page" @change="search"          show-elevator :size='[10,20,30,40]'   ></vue-custom-pages>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
    search(page,pageSzie){
        console.log("当前页:",page)
        console.log("当前页大小:",pageSzie)
    }
  },
  data () {
    return {
      page:1
      
    }
  }
}
</script>
`

参数说明

参数 说明 类型 默认值 可选值
total 总条数 Number String 0
page-size 页大小 Number String 10
show-elevator 是否显示快速跳转到某一页 Boolean false true
v-model 当前页 Number String 1
size 可以切换每页显示的数量 Array []
show-count 是否显示总页数 Boolean false true
active-color 选中页背景色 String #2979ff
next-name 下一页按钮名称 String >
pre-name 上一页按钮名称 String <
font-size 字体大小 String 12px
show-current-page 是否只展示当前页码 (1.1.2版本新增+) Boolean false

Dependencies