【原创】Vue全局分页组件

fsmStudy 发布于2019-08-23 10:32 / 3397人阅读

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

需求

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

字段

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

原型

预期长酱紫（不要嫌丑！毕竟是后台控制台！）

代码

html

css

局部组件使用方法

引入

import page from "example-page"

注册组件

components:{
    page: page
},

模板

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

npm 发包

确保你的项目的根目录的package.json文件已经建好

登录npm官网注册

在你的项目目录下登录npm login（之后按提示填写信息）

发包npm publish

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

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96437.html

(原创)vue组件 - 组件的原理和注册组件

摘要：原理组件是的属性如果直接在的原型上使用方法就能给本身增添一个的属性然后所有的实例化出来的实例对象都可以用这个属性了这就是全局组件如果是在实例化出来的对象里增添属性就是这个实例的属性只能在这个实例对象里调用所以称为局部组件全局组件注册一个全原理组件是Vue的属性. 如果直接在Vue的原型上使用方法compenont,就能给vue本身增添一个的属性.然后所有的实例化出来的vue实例对象...

neu 2019-08-22 18:09 评论0 收藏0
关于vue+element-ui项目的分页，返回默认显示第一页的问题解决

摘要：所以这就导致，页面内容正确，但是页码高亮依旧是第一页解决办法我们需要在之后刷新这个分页组件或者让分页组件的后于之后加载到页面。然后再次测试，发现完美解决问题。问题描述当前页面如下showImg(https://segmentfault.com/img/bVbjJ7a); 然后点击页码跳到第3页，然后在第三页点击页面链接跳转到新的页面showImg(https://segmentfa...

YFan 2019-08-26 13:22 评论0 收藏0
Vue表格组件--GridManager Vue

摘要：基于的封装用于便捷的在中使用除过特性外，其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。并且使用服务需要提前通过将注册至全局组件。刷新或更新查询条件或其它更多请直接访问查看当前版本 GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外，其它API与GridManag...

khs1994 2019-08-23 16:46 评论0 收藏0
读 VuePress（四）插件机制的设计

前言从 9 月份开始，vuepress 源码进行了重新设计和拆分。先是开了个 next 分支，后来又合并到 master 分支，为即将发布的 1.x 版本做准备。最主要的变化是：大部分的全局功能都被拆分成了插件的形式，以可插拔的方式来支撑 vuepress 的运作，这一点很像 webpack。具体架构如下： showImg(https://user-gold-cdn.xitu.io/2019...

April 2019-05-22 16:41 评论0 收藏0
vue轮播图插件之vue-awesome-swiper

摘要：移动端轮播图插件，在使用图形界面插件中的组件无法实现触摸滑动后，转而使用插件安装我这里安装的是下面的这个版本使用全局导入样式的话，我这里有用到分页器，就在全局中引入了样式组件引入在中使用常见的小圆点移动端轮播图插件，在使用iview图形界面插件中的carousel组件无法实现触摸滑动后，转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesom...

binta 2019-08-23 12:00 评论0 收藏0