标签：Vue.js

一个Vue分页器(不用脚手架)

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pager</title>
  <style>
    #page li {
      list-style-type: none;
      display: inline-block;
      border: 1px solid #c9c9c9;
      margin: 6px;
      padding: 8px 13px;
      border-radius: 5px;
      color: #222;
    }

    #page .pc,
    #page .n:not(.hide) {
      cursor: pointer;
    }

    #page .etc {
      border: 0;
    }

    #page .current {
      border: 1px solid #1e9fff;
      background: #1e9fff;
      color: #fff;
      font-weight: 600;
    }

    #page .hide {
      color: #fff;
      border: 1px solid #fff;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="page">
      <ul onselectstart="return false">
        <!-- 总条数 -->
        <li v-show="show_total" class="count">共{{total}}条记录</li>

        <!-- 按钮: 上一页 -->
        <li @click="if(current>1) set_page('prev')" class="n" :class="{'hide' : current == 1}">&lt; 上一页</li>

        <!-- 按钮:第1页 -->
        <li @click="set_page(1)" :class="1 == current ? 'current' : 'pc'">1</li>

        <!-- 省略号 -->
        <!-- mark -->
        <li v-show="middle.length && (middle[0] != 2)" class="etc">...</li>

        <!-- 按钮: 中间页 -->
        <li @click="set_page(v)" v-for="(v,k) in middle" :class="v == current ? 'current' : 'pc'">{{v}}</li>

        <!-- 省略号 -->
        <li v-show="middle.length && (middle[middle.length - 1] != max_page - 1)" class="etc">...</li>

        <!-- 按钮: 最后1页 -->
        <li @click="set_page(max_page)" v-show="max_page != 1" :class="max_page == current ? 'current' : 'pc'">{{max_page}}</li>

        <!-- 按钮: 下一页 -->
        <li @click="set_page('next')" v-show="current < max_page" class="n">下一页 &gt;</li>
      </ul>
    </div>

  </div>
</body>
<script src="//static.class4ever.com/vuejs/v2.6.10/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      //总条数
      total: 65536,
      //每页条数
      page_size: 10,
      //当前页
      current: 1,
      //数字按钮最多个数, 通常不可小于4
      btn_num: 10,
      //是否显示总条数
      show_total: true,
    },
    computed: {
      //计算总共有多少页
      max_page: function() {
        return parseInt((this.total - 1) / this.page_size + 1);
      },

      /**中间有哪些数字 */
      middle: function() {
        //初始化数组
        var arr = []

        //中间按钮个数
        var btn_mid = this.btn_num - 2

        //得到一些参数
        if (btn_mid % 2) {
          var half = Math.floor(btn_mid / 2)
          var left = half
        } else {
          var half = btn_mid / 2
          var left = half - 1
        }

        //初步生成数组
        for (let i = this.current - left; i < this.current + half + 1; i++)
          if (i > 1 && i < this.max_page)
            arr.push(i)

        //补齐
        if (arr.length < btn_mid) {
          //补齐右边
          if (arr[0] === 2) {
            //记录数组长度
            var length = arr.length
            for (var i = 2 + length; i < 2 + btn_mid; i++)
              if (i < this.max_page)
                arr.push(i)
          }

          //补齐左边
          else {
            //记录第1个小孩
            let firstChild = arr[0]
            //记录需要补充几个
            var need = btn_mid - arr.length + 1
            for (var i = firstChild - 1; i > firstChild - need; i--)
              if (i > 1)
                arr.unshift(i)
          }
        }

        return arr
      }
    },
    methods: {
      /**页面跳转 */
      set_page: function(param) {
        //将要去的页码
        var page
        switch (param) {
          case 'prev':
            page = this.current - 1
            break
          case 'next':
            page = this.current + 1
            break
          default:
            page = param
        }

        if (this.get(page))
          this.current = page
      },

      /**此处填入功能 */
      get: function(page) {
        console.log('do something')

        return true
      }
    }

  })
</script>

</html>