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 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
CI框架附属类用法分析
2018/12/26 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
javascript每日必学之循环
2016/02/19 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python实现发送邮件功能
2017/07/22 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
工程合作意向书范本
2015/05/09 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript