Vue全局分页组件的实现代码


Posted in Javascript onAugust 10, 2018

需求

一个监控控制台界面,有成千上万条表格数据,需要做一个全局分页组件,支持调整每页显示数目、总页数、当前页数、前进后退、自由跳转页数。

字段

参数名 数据类型 说明
total Number 总条数
pageNo Number 总页数
limit Number 每页展示条数

原型

预期长酱紫(不要嫌丑!毕竟是后台控制台!)

Vue全局分页组件的实现代码

代码

html

<template>
  <div class="paging-content clearfix">
    <div class="fl">
      总共<b> {{total}} </b>条 
      <select v-model="limit">
        <option>10</option>
        <option>20</option>
        <option>30</option>
        <option>40</option>
        <option>50</option>
        <option>100</option>
      </select>条/页
    </div>
    <div class="fr paging-box">
      <a v-if="+no>1" class="fa fa-angle-double-left" @click="goToPage(1)"></a>
      <a v-if="+no<=1" class="fa fa-angle-double-left"></a>
      <a v-if="+no>1" class="fa fa-angle-left" @click="goToPage(+no - 1)"></a>
      <a v-if="+no<=1" class="fa fa-angle-left"></a>
      <a v-if="+no-2>1">...</a>
      <a v-if="+no-2>0" @click="goToPage(+no-2)">{{+no - 2}}</a>
      <a v-if="+no-1>0" @click="goToPage(+no-1)">{{+no - 1}}</a>
      <a v-if="+no>0" style="color: #000;background: #eee;">{{no}}</a>
      <a v-if="+no+1<=+sum" @click="goToPage(+no+1)">{{+no + 1}}</a>
      <a v-if="+no+2<=+sum" @click="goToPage(+no+2)">{{+no + 2}}</a>
      <a v-if="+no+2<=+sum-1">...</a>
      <a v-if="+no<+sum" class="fa fa-angle-right" @click="goToPage(+no + 1)"></a>
      <a v-if="+no>=+sum" class="fa fa-angle-right"></a>
      <a v-if="+no<+sum" class="fa fa-angle-double-right" @click="goToPage(+sum)"></a>
      <a v-if="+no>=+sum" class="fa fa-angle-double-right"></a>
    </div>
  </div>
</template>

js

<script>
  module.exports = {
    props: ['no', 'limit', 'total'],
    computed: {
      sum: function() {
        return Math.ceil(this.total/this.limit);
      }
    },
    methods: {
      'goToPage': function(page_no) {
        this.$dispatch('page-change', page_no);
      }
    },
    watch: {
      'limit': function(newVal, oldVal) {
        if(newVal!=oldVal&&oldVal!=undefined) {
          this.$dispatch('page-limit-change', newVal);
        }
      }
    }
  }
</script>

css

<style lang="less" rel="stylesheet/less">
  //定义了一个颜色参数文件,方便自定义颜色和管理,比如@color-white: #fff;
  @import "../less/variables"; 
  .paging-content {
    > div {
      font-size: 12px;
      color: @color-text-normal;
    }
    select {
      margin-right: 4px;
    }
    .fl {
      float: left;
    }
    .fr {
      float: right;
    }
    .paging-box {
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc;
      a {
        display: inline-block;
        width: 24px;
        height: 24px;
        border-right: 1px solid #ccc;
        line-height: 24px;
        text-align: center;
        float: left;
        color: @color-text-blue;
        cursor: pointer;
      }
    }
  }
</style>

局部组件使用方法

引入

import page from 'example-page'

注册组件

components:{
  page: page
},

模板

<paging :no.sync="params.page_no" :limit.sync="params.page_limit" :total.sync="total_items"></paging>

以上是制作步骤,制作好组件以后,参考Vue官网插件发布

npm 发包

  1. 确保你的项目的根目录的package.json文件已经建好
  2. 登录npm官网注册
  3. 在你的项目目录下登录npm login(之后按提示填写信息)
  4. 发包npm publish

如果执行npm publish出现错误,可能是你的包名已经被注册过,在npm 官网上搜索一下是否已被注册了。若发包成功,你就可以在npm官网上搜索到自己的包。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
js通过循环多张图片实现动画效果
Dec 19 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 #Javascript
JavaScript闭包原理与用法实例分析
Aug 10 #Javascript
vue 动态绑定背景图片的方法
Aug 10 #Javascript
原生JS实现$.param() 函数的方法
Aug 10 #Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 #Javascript
JavaScript创建对象的常用方式总结
Aug 10 #Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 #Javascript
You might like
php中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP生成器简单实例
2015/05/13 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
Python下Fabric的简单部署方法
2015/07/14 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
详解用python生成随机数的几种方法
2019/08/04 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python 绘制可视化折线图
2020/07/22 Python
python实现画图工具
2020/08/27 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
汽车维修专业个人求职信范文
2014/01/01 职场文书
产品设计开发计划书
2014/05/07 职场文书
会计学专业自荐信
2014/06/25 职场文书
2014年政协工作总结
2014/12/09 职场文书
2015年学校总务工作总结
2015/07/20 职场文书