为iview分页组件添加跳转按钮

对iview分页组件进行二次封装，添加跳转按钮

最近的一个项目要求使用iview进行页面的搭建。项目完成在测试的时候，测试人员说页面的分页组件缺少跳转到某一页的按钮。

我告诉他直接输完页码点回车就好了，但是测试说用户不知道回车怎么办。好吧，我还能说些什么呢，改吧，发现iview分页组件没有类似的效果。只能自己上手对iview组件进行改造了。。

尝试方案一：

有问题自然想到是度娘，网上的方案几乎都是，使用原生js的模拟事件，通过点击跳转按钮去模拟iview页码输入框的Enter事件。下图是网上的通用做法：

但是，却不太适用于公司的项目。

最终方案：

1.template代码

<div class="pagination">
    <div class="page-content"></div>
    <Page
      :total="total"
      :id="pageId"
      :current="current"
      :page-size="pageSize"
      show-elevator
      show-sizer
      show-total
      :page-size-opts="[10, 20, 30, 50]"
      @on-change="pageChange($event)"
      @on-page-size-change="pageSizeChange($event)"
    />
    <div class="btn">
      <Button type="primary" @click="goPage">跳转</Button>
    </div>
  </div>

2.js代码

<script>
export default {
  name: "Pagination",
  components: {},
  props: {
    total: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      pageId: "pageId",
      current: 1,
      max: 0,
      pageSize: 10,
    };
  },
  computed: {},
  watch: {
    total: (val) => {},
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    pageChange(event) {
      this.$emit("pageChange", event);
    },
    pageSizeChange(event) {
      this.pageSize = event;
      this.$emit("pageSizeChange", event);
    },
    goPage() {
      let max = Math.ceil(this.total / this.pageSize);
      let min = 1;
      let thisPage = document.getElementById(this.pageId);
      let elevtorDiv = thisPage.getElementsByClassName(
        "ivu-page-options-elevator"
      );

      if (elevtorDiv && elevtorDiv.length > 0) {
        let pageInput = elevtorDiv[0].getElementsByTagName("input")[0];
        let event = Number(pageInput.value);
        if (event > max) {
          this.current = max;
          event = max;
          pageInput.value = max;
        } else if (event < min) {
          this.current = min;
          event = min;
          pageInput.value = min;
        } else {
          event = Math.floor(event);
          this.current = event;
          pageInput.value = event;
        }
        this.pageChange(event);
      }
    },
  },
};
</script>

终于完成了对分页组件的封装，测试人员也测试通过了。代码有很多不足之处，仅供有遇到同样问题的朋友参考。