跟随Element学习Vue小技巧(29)——Pagination

七秒记忆的鱼
810 阅读4分钟
❝

不管遇到什么事

都要一笑而过

❞

前言

一天，0跟8在街上相遇，0不屑的看了8一眼，说：“胖就胖呗，还系什么裤腰带啊”

0碰到10，看了他一眼，不屑地说：“年纪轻轻的，拄什么拐仗呀。”

0碰到101，很同情地看着他，“哎，怎么拄上双拐了！”

0碰到01，瞥她一眼，“小样，傍上大款我就不认识你了！”

0碰上了Q，大吃一惊，怎么长尾巴了？

0碰上00说，“胖子怎么不等我就结婚了。”

0在路上又看到9，“哎，兄弟，怎么截肢了。。”
数字是不是挺有意思的呀，O(∩_∩)O哈哈~
今天也会碰到很多数字，可不是让你学数学喔，所以不要觉得亚历山大

准备好了吗? Ready, GO!

1 Pager

分页结构

一页两页三四页，
五页六页七八页。
九页十页页页点，
点来点去BUG现。

代码片段

<template>
  <ul class="el-pager">
    <li v-if="pageCount > 0">1</li>
    <li v-if="showPrevMore"></li>
    <li v-for="pager in pagers">{{ pager }}</li>
    <li v-if="showNextMore"></li>
    <li v-if="pageCount > 1">{{ pageCount }}</li>
  </ul>
</template>

技巧解析

❝

整个分页分为5个部分：
首页+更多+页码+更多+末页

前面几页，隐藏第一个更多
后面几页，隐藏后一个更多

❞

事件代理

晚上叫了个代驾，讲好了价格，结果开到一半，代驾要求涨价

  • 哥，你看这么远，能不能加点？
  • 咱们不是说好的么
  • 可是你看这么远，而且...
  • 不行，咱们讲好的
  • 要是不行我就不干了
  • 你这人。。

于是，不一会儿，警察过来了

  • 有人举报你酒驾，请配合检查
  • 警察同志，我可没喝酒啊
  • 喝没喝待会儿就知道了

结果，吹了好几口气，没有酒驾
我看了看后视镜，发现有个人影消失了
叹了口气，唉，老子只是不想开车而已

代码片段

<template>
  <ul @click="onPagerClick" class="el-pager">
   <li v-if="pageCount > 0">1</li>
   ...
   <li v-if="pageCount > 1">{{ pageCount }}</li>
  </ul>
</template>

onPagerClick(event) {
  const target = event.target;
  if (target.tagName === 'UL' || this.disabled) {
    return;
  }
  ...
}

技巧解析

❝

你遇到过这么坑的代驾吗？
还好DOM代理不那么坑
你看，要给那么多页码li添加点击事件，怎么办，估计给累个半死。。
要不，咱也请个代理，O(∩_∩)O哈哈~
所以，点击事件交给包裹的父级ul
简直是perfect！ JS中的事件委托 传送门

❞

2 pagination

组件定义

老板：老是板着脸
总裁：总想着裁人
经理：经常讲道理
白领：白白领薪水
组件：。。。

components: {
  Prev: {
    render(h) {
      return (
        <button
          type="button"
          class="btn-prev"
          disabled={ this.$parent.disabled || this.$parent.internalCurrentPage <= 1 }
          on-click={ this.$parent.prev }>
          {
            this.$parent.prevText
              ? <span>{ this.$parent.prevText }</span>
              : <i class="el-icon el-icon-arrow-left"></i>
          }
        </button>
      );
    }
  },
  ...
  Pager
},

技巧解析

❝

你以为的组件长啥样？
Vue.component()
Vue.extend()？
const Home = {}
Home.vue
...
还有吗？
还有的，JSX呀
发现没，compnents: {Prev}
除了import导入，还可以直接定义呢

组件注册 传送门

❞



「只要我还能再看到你一次」 「我就能跟你说我有多爱你」

参考链接

往期回顾

avatar
文章
阅读
粉丝