首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用Vue构建可重用的分页组件

Posted in Javascript onMarch 26, 2018

Web应用程序中资源分页不仅对性能很有帮助，而且从用户体验的角度来说也是非常有用的。在这篇文章中，将了解如何使用Vue创建动态和可用的分页组件。

基本结构

分页组件应该允许用户访问第一个和最后一个页面，向前和向后移动，并直接切换到近距离的页面。

大多数应用程序在用户每次更改页面时都会发出API请求。我们需要确保组件允许这样做，但是我们不希望在组件内发出这样的请求。这样，我们将确保组件在整个应用程序中是可重用的，并且请求都是在操作或服务层中进行的。我们可以通过使用用户单击的页面的数字触发事件来实现此目的。

有几种可能的方法来实现API端点上的分页。对于这个例子，我们假设API告诉我们每个页面的结果数、页面总数和当前页面。这些将是我们的动态 props 。

相反，如果API只告诉记录的总数，那么我们可以通过将结果的数量除以每一页的结果数来计算页数： totalResults / resultsPerPage 。

我们想要渲染一个按钮到 第一页 、 上一页 、 页面数量范围 、 下一页 和 最后一页 ：

[first] [next] [1] [2] [3] [previous] [last]

比如像下图这样的一个效果：

使用Vue构建可重用的分页组件 

尽管我们希望渲染一个系列的页面，但并不希望渲染所有可用页面。让我们允许在我们的组件中设置一个最多可见按钮的 props 。

既然我们知道了我们想要的组件要做成什么，需要哪些数据，我们就可以设置HTML结构和所需要的 props 。

<template id="pagination">
  <ul class="pagination">
    <li>
      <button type="button">« First</button>
    </li>
    <li>
      <button type="button">«</button>
    </li>
    <!-- 页数的范围 -->
    <li>
      <button type="button">Next »</button>
    </li>
    <li>
      <button type="button">»</button>
    </li>
  </ul>
</template>
Vue.component('pagination', {
  template: '#pagination',
  props: {
    maxVisibleButtons: {
      type: Number,
      required: false,
      default: 3
    },
    totalPages: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    }
  }
})

上面的代码注册了一个 pagination 组件，如果调用这个组件：

<div id="app">
  <pagination></pagination>
</div>

这个时候看到的效果如下：

使用Vue构建可重用的分页组件 

注意，为了能让组件看上去好看一点，给组件添加了一点样式。

事件监听

现在我们需要通知父组件，当用户单击按钮时，用户点击了哪个按钮。

我们需要为每个按钮添加一个事件监听器。 v-on 指令 允许侦听DOM事件。在本例中，我将使用 v-on 的快捷键 来侦听单击事件。

为了通知父节点，我们将使用 $emit 方法 来发出一个带有页面点击的事件。

我们还要确保分页按钮只有在页面可用时才唯一一个当前状态。为了这样做，将使用 v-bind 将 disabled 属性的值与当前页面绑定。我们还是使用 :v-bind 的快捷键 : 。

为了保持我们的 template 干净，将使用 computed 属性 来检查按钮是否被禁用。使用 computed 也会被缓存，这意味着只要 currentPage 不会更改，对相同计算属性的几个访问将返回先前计算的结果，而不必再次运行该函数。

<template id="pagination">
  <ul class="pagination">
    <li>
      <button type="button" @click="onClickFirstPage" :disabled="isInFirstPage">« First</button>
    </li>
    <li>
      <button type="button" @click="onClickPreviousPage" :disabled="isInFirstPage">«</button>
    </li>
    <li v-for="page in pages">
      <button type="button" @click="onClickPage(page.name)" :disabled="page.isDisabled"> {{ page.name }}</button>
    </li>
    <li>
      <button type="button" @click="onClickNextPage" :disabled="isInLastPage">Next »</button>
    </li>
    <li>
      <button type="button" @click="onClickLastPage" :disabled="isInLastPage">»</button>
    </li>
  </ul>
</template>

Vue.component('pagination', {
  template: '#pagination',
  props: {
    maxVisibleButtons: {
      type: Number,
      required: false,
      default: 3
    },
    totalPages: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    }
  },
  computed: {
    isInFirstPage: function () {
      return this.currentPage === 1
    },
    isInLastPage: function () {
      return this.currentPage === this.totalPages
    }
  },
  methods: {
    onClickFirstPage: function () {
      this.$emit('pagechanged', 1)
    },
    onClickPreviousPage: function () {
      this.$emit('pagechanged', this.currentPage - 1)
    },
    onClickPage: function (page) {
      this.$emit('pagechanged', page)
    },
    onClickNextPage: function () {
      this.$emit('pagechanged', this.currentPage + 1)
    },
    onClickLastPage: function () {
      this.$emit('pagechanged', this.totalPages)
    }
  }
})

在调用 pagination 组件时，将 totalPages 和 total 以及 currentPage 传到组件中：

<div id="app">
  <pagination :total-pages="11" :total="120" :current-page="currentPage"></pagination>
</div>

let app = new Vue({
  el: '#app',
  data () {
    return {
      currentPage: 2
    }
  }
})

运行上面的代码，将会报错：

使用Vue构建可重用的分页组件 

不难发现，在 pagination 组件中，咱们还少了 pages 。从前面介绍的内容，我们不难发现，需要计算出 pages 的值。

Vue.component('pagination', {
  template: '#pagination',
  props: {
    maxVisibleButtons: {
      type: Number,
      required: false,
      default: 3
    },
    totalPages: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    }
  },
  computed: {
    isInFirstPage: function () {
      return this.currentPage === 1
    },
    isInLastPage: function () {
      return this.currentPage === this.totalPages
    },
    startPage: function () {
      if (this.currentPage === 1) {
        return 1
      }
      if (this.currentPage === this.totalPages) {
        return this.totalPages - this.maxVisibleButtons + 1
      }
      return this.currentPage - 1
    },
    endPage: function () {
      return Math.min(this.startPage + this.maxVisibleButtons - 1, this.totalPages)
    },
    pages: function () {
      const range = []
      for (let i = this.startPage; i <= this.endPage; i+=1) {
        range.push({
          name: i,
          isDisabled: i === this.currentPage
        })
      }
      return range
    }
  },
  methods: {
    onClickFirstPage: function () {
      this.$emit('pagechanged', 1)
    },
    onClickPreviousPage: function () {
      this.$emit('pagechanged', this.currentPage - 1)
    },
    onClickPage: function (page) {
      this.$emit('pagechanged', page)
    },
    onClickNextPage: function () {
      this.$emit('pagechanged', this.currentPage + 1)
    },
    onClickLastPage: function () {
      this.$emit('pagechanged', this.totalPages)
    }
  }
})

这个时候得到的结果不再报错，你在浏览器中将看到下图这样的效果：

使用Vue构建可重用的分页组件 

添加样式

现在我们的组件实现了最初想要的所有功能，而且添加了一些样式，让它看起来更像一个分页组件，而不仅像是一个列表。

我们还希望用户能够清楚地识别他们所在的页面。让我们改变表示当前页面的按钮的颜色。

为此，我们可以使用对象语法将HTML类绑定到当前页面按钮上。当使用对象语法绑定类名时，Vue将在值发生变化时自动切换类。

虽然 v-for 中的每个块都可以访问父作用域范围，但是我们将使用 method 来检查页面是否处于 active 状态，以便保持我们的 templage 干净。

Vue.component('pagination', {
  template: '#pagination',
  props: {
    maxVisibleButtons: {
      type: Number,
      required: false,
      default: 3
    },
    totalPages: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    }
  },
  computed: {
    isInFirstPage: function () {
      return this.currentPage === 1
    },
    isInLastPage: function () {
      return this.currentPage === this.totalPages
    },
    startPage: function () {
      if (this.currentPage === 1) {
        return 1
      }
      if (this.currentPage === this.totalPages) {
        return this.totalPages - this.maxVisibleButtons + 1
      }
      return this.currentPage - 1
    },
    endPage: function () {
      return Math.min(this.startPage + this.maxVisibleButtons - 1, this.totalPages)
    },
    pages: function () {
      const range = []
      for (let i = this.startPage; i <= this.endPage; i+=1) {
        range.push({
          name: i,
          isDisabled: i === this.currentPage
        })
      }
      return range
    }
  },
  methods: {
    onClickFirstPage: function () {
      this.$emit('pagechanged', 1)
    },
    onClickPreviousPage: function () {
      this.$emit('pagechanged', this.currentPage - 1)
    },
    onClickPage: function (page) {
      this.$emit('pagechanged', page)
    },
    onClickNextPage: function () {
      this.$emit('pagechanged', this.currentPage + 1)
    },
    onClickLastPage: function () {
      this.$emit('pagechanged', this.totalPages)
    },
    isPageActive: function (page) {
      return this.currentPage === page;
    }
  }
})

接下来，在 pages 中添加当前状态：

<li v-for="page in pages">
  <button type="button" @click="onClickPage(page.name)" :disabled="page.isDisabled" :class="{active: isPageActive(page.name)}"> {{ page.name }}</button>
</li>

这个时候你看到效果如下：

使用Vue构建可重用的分页组件 

但依然还存在一点点小问题，当你在点击别的按钮时， active 状态并不会随着切换：

使用Vue构建可重用的分页组件 

继续添加代码改变其中的效果：

let app = new Vue({
  el: '#app',
  data () {
    return {
      currentPage: 2
    }
  },
  methods: {
    onPageChange: function (page) {
      console.log(page)
      this.currentPage = page;
    }
  }
})

在调用组件时：

<div id="app">
  <pagination :total-pages="11" :total="120" :current-page="currentPage" @pagechanged="onPageChange"></pagination>
</div>

这个时候的效果如下了：

使用Vue构建可重用的分页组件 

到这里，基本上实现了咱想要的分页组件效果。

无障碍化处理

熟悉Bootstrap的同学都应该知道，Bootstrap中的组件都做了无障碍化的处理，就是在组件中添加了WAI-ARIA相关的设计。比如在分页按钮上添加 aria-label 相关属性：

使用Vue构建可重用的分页组件 

在我们这个组件中，也相应的添加有关于WAI-ARIA相关的处理：

<template id="pagination">
  <ul class="pagination" aria-label="Page navigation">
    <li>
      <button type="button" @click="onClickFirstPage" :disabled="isInFirstPage" aria-label="Go to the first page">« First</button>
    </li>
    <li>
      <button type="button" @click="onClickPreviousPage" :disabled="isInFirstPage" aria-label="Previous">«</button>
    </li>
    <li v-for="page in pages">
      <button type="button" @click="onClickPage(page.name)" :disabled="page.isDisabled" :aria-label="`Go to page number ${page.name}`"> {{ page.name }}</button>
    </li>
    <li>
      <button type="button" @click="onClickNextPage" :disabled="isInLastPage" aria-label="Next">Next »</button>
    </li>
    <li>
      <button type="button" @click="onClickLastPage" :disabled="isInLastPage" aria-label="Go to the last page">»</button>
    </li>
  </ul>
</template>

这样有关于 aria 相关的属性就加上了：

使用Vue构建可重用的分页组件 

最终的效果如下，可以点击下面的连接访问：

https://codepen.io/airen/pen/mxMLrG

使用Vue构建可重用的分页组件

- Author -

Airen

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
Angular 组件之间的交互的示例代码
Mar 24 #Javascript
Vue中computed与methods的区别详解
Mar 24 #Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 #Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 #Javascript
S900(1) 矿石收音机(1) 沃尔沃(1) E1-XM(1) ETON(1) 放大器(1) R601SW(1) DSP(2) 军机(1) VOLVO(1)
You might like
十天学会php之第十天
2006/10/09 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
python基于socket实现网络广播的方法
2015/04/29 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Python中and和or如何使用
2020/05/28 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
python中的错误如何查看
2020/07/08 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
Maisons du Monde德国：法国家具和装饰的市场领导者
2019/07/26 全球购物
Armor Lux法国官方网站：水手服装、成衣和内衣
2020/05/26 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
个人贷款担保书
2014/04/01 职场文书
2014年秘书工作总结
2014/11/25 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python