• Vue 实现一个分页组件


      实现分页组件要分三个部分

      样式,逻辑,和引用

      首先新建一个vue文件用来承载组件内容

      第一步:构建样式 

      <template>
        <nav>
        <ul class="pagination">
        <li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(current - 1)"> <img src="../../../assets/btnleft.png" alt=""> </a></li>
        <li v-for="(p,index) in grouplist" :class="{'active': current == p.val}" :key="index"><a href="javascript:;" @click="setCurrent(p.val)"> {{ p.text }} </a>
        </li>
        <li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(current + 1)"> <img src="../../../assets/btnright.png" alt=""></a></li>
        </ul>
        </nav>
      </template> 

      <style scope="scope">
        .pagination {
          overflow: hidden;
          display: table;
          margin: 0 auto;
          height: 50px;
        }
        .pagination li {
          float: left;
          height: 30px;
          border-radius: 5px;
          margin: 3px;
        }
        .pagination li img{
          100%;
          height:100%;
         }
        .pagination li:hover{
          background: #1E7FED;
        }
        .pagination li:hover a{
          color: #fff;
        }
        .pagination a {
          display: block;
           30px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          font-size: 12px;
          border-radius: 5px;
          text-decoration: none;
          border:1px solid rgba(221,221,221,1);
          color: #666666;
        }
        .pagination .active {
          background: #1E7FED !important;
        }
        .active >a{
          color:white;
        }
      </style>

    第二步:编写逻辑  

    <script>
    export default{
    data(){
    return {
    current: this.currentPage
    }
    },
    props: {
    total: {// 数据总条数
    type: Number,
    default: 0
    },
    display: {// 每页显示条数
    type: Number,
    default: 20
    },
    currentPage: {// 当前页码
    type: Number,
    default: 1
    },
    pagegroup: {// 分页条数
    type: Number,
    default: 20,
    coerce: function (v) {
    v = v > 0 ? v : 20;
    return v % 2 === 1 ? v : v + 1;
    }
    }
    },
    computed: {
    page: function () { // 总页数
    return Math.ceil(this.total / this.display);
    },
    grouplist: function () { // 获取分页页码
    var len = this.page, temp = [], list = [], count = Math.floor(this.pagegroup / 2), center = this.current;
    if (len <= this.pagegroup) {
    while (len--) {
    temp.push({text: this.page - len, val: this.page - len});
    }
    return temp;
    }
    while (len--) {
    temp.push(this.page - len);
    }
    var idx = temp.indexOf(center);
    (idx < count) && ( center = center + count - idx);
    (this.current > this.page - count) && ( center = this.page - count);
    temp = temp.splice(center - count - 1, this.pagegroup);
    do {
    var t = temp.shift();
    list.push({
    text: t,
    val: t
    });
    } while (temp.length);
    if (this.page > this.pagegroup) {
    (this.current > count + 1) && list.unshift({text: '...', val: list[0].val - 1});
    (this.current < this.page - count) && list.push({text: '...', val: list[list.length - 1].val + 1});
    }
    return list;
    }
    },
    methods: {
    setCurrent: function (idx) {
    if (this.current != idx && idx > 0 && idx < this.page + 1) {
    this.current = idx;
    this.$emit('pagechange', this.current);
    }
    }
    }
    }
    </script>

     第三步:引用组件

      1.在父组件中引入并注册

    components: {
       "v-pagination": Paging,
    },
    2.在data下声明三个变量

    total:0, // 记录总条数

    display: 10, // 每页显示条数

    current: 1, // 当前的页数

    3.挂载

    <v-pagination v-if="totals > 0" :total="totals" :current-page='current' @pagechange="pagechange"></v-pagination>
    4.添加事件
    pagechange:function(currentPage){
        // console.log(currentPage);
      //该参数就是当前点击的页码数
    }
  • 相关阅读:
    跑步前后吃什么?
    英雄杀八人场心得
    如何判断JavaScript数据具体类型
    js实现时间日期的格式化
    各个公司前端笔试题回顾
    原型模式Prototype,constructor,__proto__详解
    二级菜单不同方法的实现
    秋招笔试碰到的疑难题目1
    php和mysql学习问题笔记
    es6学习笔记12--Class
  • 原文地址:https://www.cnblogs.com/-moon/p/11381181.html
Copyright © 2020-2023  润新知