封装简易页码组件，用在较小表单中的弹窗

封装轻量级的页码组件，用在较小表单中的页码，无具体页码显示，也可以通过输入的方式实现页码跳转功能。

// paginationDialog.vue 组件中的内容
<template>
  <div class="xf-dialog-pagination">
    <span class="xf-dialog-pagination-total">{{ totalText }}</span>
    <div class="xf-dialog-pagination-pages">
      <i class="el-icon-arrow-left" :class="{'xf-dialog-pagination-diabled': prevPageDisabled}" @click="prevPage"></i>
      <c-input-filter ref="inputRef" :reg="ONLY_NUM_FILTER_REG" v-model="curPage" @input="handleInput" @blur="curPageBlur"></c-input-filter>
      <span class="xf-dialog-pagination-divider">/</span>
      <span class="xf-dialog-pagination-nums">{{ totalPages }}</span>
      <i class="el-icon-arrow-right" :class="{'xf-dialog-pagination-diabled': nextPageDisabled}" @click="nextPage"></i>
    </div>
  </div>
</template>
<script>
import XfIcon from '../../icon/src/main'
import CInputFilter from '../../cirsCommon/element/c-input-filter'
import { t } from '../../../src/locale/index'
import { ONLY_NUM_FILTER_REG } from '../../utils/regUtils.js'
const DEFAULT_PAGE_SIZE = 10
const MIN_SIZE = 1
const PAGE_INTERVAL = 1
export default {
  name: 'XfDialogPagination',
  components: {
    XfIcon,
    CInputFilter
  },
  props: {
    // 总数量
    total: {
      type: Number,
      default: 0
    },
    // 每页数量，默认每页10个
    pageSize: {
      type: Number,
      default: DEFAULT_PAGE_SIZE
    },
    // 当前处于第几页
    currentPage: {
      type: Number,
      dafault: MIN_SIZE
    }
  },
  data () {
    return {
      ONLY_NUM_FILTER_REG,
      curPage: 1
    }
  },
  computed: {
    totalText () {
      return t('cirs.paginationDialog.totalText', [Number(this.total) || 0])
    },
    // 总页数
    totalPages () {
      let pages = Math.ceil((Number(this.total) || 0) / (Number(this.pageSize) || DEFAULT_PAGE_SIZE))
      return pages < MIN_SIZE ? MIN_SIZE : pages
    },
    // 第一页时禁用上一页按钮
    prevPageDisabled () {
      return +this.curPage === MIN_SIZE
    },
    // 最后一页时禁用下一页按钮
    nextPageDisabled () {
      return +this.curPage === this.totalPages
    }
  },
  watch: {
    currentPage: {
      handler () {
        if (this.currentPage !== this.curPage) {
          this.curPage = this.currentPage
        }
      }
    }
  },
  methods: {
    // 向前翻页
    prevPage () {
      if (!this.prevPageDisabled) {
        let curPage = +this.curPage - PAGE_INTERVAL
        this.curPage = curPage < MIN_SIZE ? MIN_SIZE : curPage
        this.$emit('current-change', this.curPage)
      }
    },

    // 向后翻页
    nextPage () {
      if (!this.nextPageDisabled) {
        let curPage = +this.curPage + PAGE_INTERVAL
        this.curPage = curPage > this.totalPages ? this.totalPages : curPage
        this.$emit('current-change', this.curPage)
      }
    },

    // 处理输入
    handleInput (val) {
      if (this.curPage !== '') {
        this.curPage = +val
      }
    },

    // 输入框失焦
    curPageBlur () {
      let curPage = +this.curPage
      if (curPage < MIN_SIZE) {
        curPage = MIN_SIZE
      }
      if (curPage > this.totalPages) {
        curPage = this.totalPages
      }
      if (+this.curPage !== curPage) {
        if (this.$refs.inputRef) {
          this.$refs.inputRef.handleInput(`${curPage}`)
        }
      }
      this.curPage = curPage
      this.$emit('current-change', this.curPage)
    }
  }
}
</script>
<style scoped lang="less">
@import url(../../styles/components/XfDialogPagination);
</style>

index.js中文件

// index.js
import XfDialogPagination from './src/main'

XfDialogPagination.install = function (Vue) {
  Vue.component(XfDialogPagination.name, XfDialogPagination)
}

export default XfDialogPagination

XfDialogPagination.less

@import '../themeIcc/index.less';
.xf-dialog-pagination {
  position: relative;
  height: 32px;
  font-size: 14px;
  color: @icc-icon-tree-color;

  .el-input {
    display: inline-block;
    margin-left: 16px;
    width: 56px;
    vertical-align: middle;
  }

  .el-input__inner {
    text-align: center;
  }

  .el-icon-arrow-left,
  .el-icon-arrow-right {
    width: 20px;
    cursor: pointer;
    vertical-align: middle;
  }
}

.xf-dialog-pagination-diabled {
  background-color: #fff;
  color: #c0c4cc;
  user-select: none;
  cursor: not-allowed !important; // 加important才会生效
}

.xf-dialog-pagination-total {
  line-height: 32px;
}

.xf-dialog-pagination-pages {
  position: absolute;
  top: 0;
  right: 0
}

.xf-dialog-pagination-divider {
  margin-left: 12px;
  margin-right: 8px;
}

.xf-dialog-pagination-nums {
  margin-right: 23px;
}