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 相关文章推荐
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
更强大的vue ssr实现预取数据的方式
Jul 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 的 __FILE__ 常量
2007/01/15 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
python代码过长的换行方法
2018/07/19 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
电视节目策划方案
2014/05/16 职场文书
解除劳动合同证明书
2014/09/26 职场文书
新教师个人工作总结
2015/02/06 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
寒假生活随笔
2015/08/15 职场文书
放假通知怎么写
2015/08/18 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
MySQL索引是啥?不懂就问
2021/07/21 MySQL
Python如何让字典保持有序排列
2022/04/29 Python