分页组件——vue

来源：互联网发布：沧海一声笑知乎编辑：程序博客网时间：2024/05/20 02:25

项目开发中，经常会遇到分页功能，也会经常涉及组件化开发和组件复用，下列用vue对分页组件进行了简单封装，具体代码如下：

源代码：

（1）app.vue代码段：

<template>  <div id="app">    <v-pagination :cur.sync="cur" :all.sync="all" @listen="monitor"></v-pagination>    <p>{{msg}}</p>  </div></template><script>import pagination from './components/pagination.vue';export default {  name: 'app',  data () {    return{      // 当前页码      cur: 1,      // 总页数      all: 100,      msg: ''    };  },  components: {    // 引用组件    'v-pagination': pagination  },  created() {      this.msg = "当前页为：" + this.cur;  },  methods: {    monitor: function (data) {    // 翻页事件      this.msg = "当前页为：" +  data;    }  }};</script><style lang="scss"></style>

（2）pagination.vue代码片段：

<template>  <div class="page-bar">     <ul>       <li><a :class="setButtonClass(0)" v-on:click="prvePage(curIndex)">上一页</a></li>       <li v-for="index in indexs"  v-bind:class="{ active: curIndex == index }">         <a v-on:click="btnClick(index)">{{ index < 1 ? "..." : index }}</a>       </li>       <li><a :class="setButtonClass(1)" v-on:click="nextPage(curIndex)">下一页</a></li>     </ul>  </div></template><script>   export default {     props: ['cur', 'all'],     data() {      return{        curIndex: 1      };     },     computed: {      indexs: function () {        var left = 1;        var right = this.all;        var ar = [];        if (this.all >= 11) {          if (this.curIndex > 5 && this.curIndex < this.all - 4) {            left = this.curIndex - 5;            right = this.curIndex + 4;          } else {            if (this.curIndex <= 5) {              left = 1;              right = 10;            } else {              right = this.all;              left = this.all - 9;            }          }        }        while (left <= right) {          ar.push(left);          left++;        }        if (ar[0] > 1) {          ar[0] = 1;          ar[1] = -1;        }        if (ar[ar.length - 1] < this.all) {          ar[ar.length - 1] = this.all;          ar[ar.length - 2] = 0;        }        return ar;      }    },    methods: {    // 页码点击事件      btnClick: function (data) {        if (data < 1) return;        if (data != this.curIndex) {            this.curIndex = data;          this.$emit('listen', data);          console.log(data);        }      },      // 下一页      nextPage: function (data) {        if (this.curIndex >= this.all) return;        this.btnClick(this.curIndex + 1);      },      // 上一页      prvePage: function (data) {        if (this.curIndex <= 1) return;        this.btnClick(this.curIndex - 1);      },      // 设置按钮禁用样式      setButtonClass: function (isNextButton) {        if (isNextButton) {          return this.curIndex >= this.all ? "page-button-disabled" : "";        }        else {          return this.curIndex <= 1 ? "page-button-disabled" : "";        }      }    }  }</script><style lang="scss">   @import "../style/pagination.css";</style>

（3）pagination.css代码片段：

ul, li {margin: 0px;padding: 0px;}.page-bar {    -webkit-touch-callout: none;    -webkit-user-select: none;    -khtml-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}.page-button-disabled {    color:#ddd !important;}.page-bar li {    list-style: none;    display: inline-block;}.page-bar li:first-child > a {    margin-left: 0px;}.page-bar a {    border: 1px solid #ddd;    text-decoration: none;    position: relative;    float: left;    padding: 6px 12px;    margin-left: -1px;    line-height: 1.42857143;    color: #337ab7;    cursor: pointer;}.page-bar a:hover {    background-color: #eee;}.page-bar .active a {    color: #fff;    cursor: default;    background-color: #337ab7;    border-color: #337ab7;}.page-bar i {    font-style: normal;    color: #d44950;    margin: 0px 4px;    font-size: 12px;}

（4）main.js代码片段：

import Vue from 'vue'import App from './App.vue'new Vue({  el: '#app',  render: h => h(App)})

（5）效果图：

阅读全文

0 0