vivo-ui/lib/components/pagination/index.js

vivo ui component lib for vue

(function () {
  if (typeof document !== 'undefined') {
    var head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        css = " .vui-pagination { display: inline-block; color: #333; font-size: 14px; line-height: 26px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vui-pagination-btn, .vui-pagination li:not(.vui-pagination-disabled), .vui-pagination input { border: 1px solid #e5e5e5; } .vui-pagination-btn { display: inline-block; margin-left: 6px; min-width: 64px; } .vui-pagination-btn:first-of-type, .vui-pagination-btn:nth-of-type(4) { margin-left: 0; } .vui-pagination ul { list-style-type: none; display: inline-block; margin: 0; padding: 0; } .vui-pagination li { display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-left: 6px; padding: 0 5px; min-width: 28px; cursor: pointer; } .vui-pagination-prompt { margin: 0 15px; } .vui-pagination input { margin: 0 5px; padding: 0 5px; width: 40px; height: 26px; line-height: inherit; text-align: center; outline: none; } .vui-pagination li.vui-pagination-active, .vui-pagination li:not(.vui-pagination-disabled):hover, .vui-pagination-btn:not(.vui-pagination-disabled):hover { color: #000; border-color: #000; } .vui-pagination-disabled, .vui-pagination-active { cursor: not-allowed !important; } .vui-pagination-btn.vui-pagination-disabled { color: #ccc; } ";style.type = 'text/css';if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }head.appendChild(style);
  }
})();

var index = { render: function render() {
    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "vui-pagination" }, [_c('span', { class: ['vui-pagination-btn', { 'vui-pagination-disabled': _vm.value === 1 }], on: { "click": function click($event) {
          _vm.value > 1 && _vm.goto(_vm.value - 1);
        } } }, [_vm._v("上一页")]), _vm._v(" "), _c('ul', _vm._l(_vm.list, function (page, index) {
      return _c('li', { key: index, class: { 'vui-pagination-disabled': page === '...', 'vui-pagination-active': page === _vm.value }, on: { "click": function click($event) {
            page !== '...' && _vm.goto(page);
          } } }, [_vm._v(_vm._s(page) + " ")]);
    })), _vm._v(" "), _c('span', { class: ['vui-pagination-btn', { 'vui-pagination-disabled': _vm.value === _vm.total }], on: { "click": function click($event) {
          _vm.value < _vm.total && _vm.goto(_vm.value + 1);
        } } }, [_vm._v("下一页 ")]), _vm._v(" "), _vm.showGoto ? [_c('span', { staticClass: "vui-pagination-prompt" }, [_vm._v("共" + _vm._s(_vm.total) + "页，跳转至"), _c('input', { attrs: { "type": "text" }, domProps: { "value": _vm.num }, on: { "input": _vm.input, "keyup": function keyup($event) {
          if (!('button' in $event) && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
            return null;
          }_vm.goto(_vm.num);
        } } }), _vm._v("页")]), _vm._v(" "), _c('span', { class: ['vui-pagination-btn', { 'vui-pagination-disabled': !_vm.num }], on: { "click": function click($event) {
          _vm.num && _vm.goto(_vm.num);
        } } }, [_vm._v("确定")])] : _vm._e()], 2);
  }, staticRenderFns: [],
  name: 'vui-pagination',
  props: {
    total: { // 总页数
      type: Number,
      required: true
    },
    value: { // 当前页
      type: Number,
      default: 1
    },
    size: { // 最多显示几个按钮，要求为>=5的奇数
      type: Number,
      default: 7
    },
    showGoto: { // 是否显示goto区域
      type: Boolean,
      default: true
    }
  },
  data: function data() {
    return {
      num: undefined // 输入的页码
    };
  },

  computed: {
    list: function list() {
      var pages = [];
      var type = void 0;
      var start = void 0;
      var end = void 0;

      // 根据当前页码和总页数动态渲染
      if (this.value <= (this.size + 1) / 2) {
        // 左边没省略号
        if (this.total <= this.size) {
          // 右边没省略号
          type = 0;
        } else {
          type = 1;
        }
      } else {
        if (this.value + (this.size - 1) / 2 >= this.total) {
          // 右边没省略号
          type = 2;
        } else {
          type = 3;
        }
      }
      switch (type) {
        case 0:
          // 左右两边都没有省略号
          start = 0;
          end = this.total;
          while (start < end) {
            pages.push(++start);
          }
          break;
        case 1:
          // 右边有省略号，左边没有
          start = 0;
          end = this.size - 2;
          while (start < end) {
            pages.push(++start);
          }
          pages.push('...', this.total);
          break;
        case 2:
          // 左边有省略号，右边没有
          start = this.total - this.size + 2;
          end = this.total;
          pages.push(1, '...');
          while (start < end) {
            pages.push(++start);
          }
          break;
        case 3:
          // 左右两边都有省略号
          start = this.value - (this.size - 3) / 2;
          end = this.value + (this.size - 5) / 2;
          pages.push(1, '...');
          while (start < end) {
            pages.push(++start);
          }
          pages.push('...', this.total);
          break;
      }

      return pages;
    }
  },
  methods: {
    input: function input(event) {
      // 限定输入值在页码范围内
      var value = Number(event.target.value.replace(/\D/g, ''));

      if (value) {
        value = value > this.total ? this.total : value;
        event.target.value = value; // 必须要手动设置值，因为当this.num=this.total后，再输入大于this.total的value时，vue不会去更新input元素
        this.num = value;
      } else {
        event.target.value = '';
        this.num = undefined;
      }
    },
    goto: function goto(num) {
      this.$emit('input', num);
    }
  }
};

export default index;