<strike id="osgei"></strike>

<dfn id="osgei"></dfn>

<small id="osgei"></small>

<fieldset id="osgei"></fieldset>

【原創(chuàng)】Vue全局分頁組件

fsmStudy 發(fā)布于2019-08-23 10:32 / 3546人閱讀

摘要：需求一個監(jiān)控控制臺界面，有成千上萬條表格數(shù)據(jù)，需要做一個全局分頁組件，支持調(diào)整每頁顯示數(shù)目總頁數(shù)當(dāng)前頁數(shù)前進后退自由跳轉(zhuǎn)頁數(shù)。

需求

一個監(jiān)控控制臺界面，有成千上萬條表格數(shù)據(jù)，需要做一個全局分頁組件，支持調(diào)整每頁顯示數(shù)目、總頁數(shù)、當(dāng)前頁數(shù)、前進后退、自由跳轉(zhuǎn)頁數(shù)。

字段

參數(shù)名	數(shù)據(jù)類型	說明
total	Number	總條數(shù)
pageNo	Number	總頁數(shù)
limit	Number	每頁展示條數(shù)

原型

預(yù)期長醬紫（不要嫌丑！畢竟是后臺控制臺！）

代碼

html

css

局部組件使用方法

引入

import page from "example-page"

注冊組件

components:{
    page: page
},

模板

以上是制作步驟，制作好組件以后，參考Vue官網(wǎng)插件發(fā)布

npm 發(fā)包

確保你的項目的根目錄的package.json文件已經(jīng)建好

登錄npm官網(wǎng)注冊

在你的項目目錄下登錄npm login（之后按提示填寫信息）

發(fā)包npm publish

如果執(zhí)行npm publish出現(xiàn)錯誤，可能是你的包名已經(jīng)被注冊過，在npm 官網(wǎng)上搜索一下是否已被注冊了。若發(fā)包成功，你就可以在npm官網(wǎng)上搜索到自己的包。

云服務(wù)器 GPU云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96437.html

相關(guān)文章

(原創(chuàng))vue組件 - 組件的原理和注冊組件

摘要：原理組件是的屬性如果直接在的原型上使用方法就能給本身增添一個的屬性然后所有的實例化出來的實例對象都可以用這個屬性了這就是全局組件如果是在實例化出來的對象里增添屬性就是這個實例的屬性只能在這個實例對象里調(diào)用所以稱為局部組件全局組件注冊一個全原理組件是Vue的屬性. 如果直接在Vue的原型上使用方法compenont,就能給vue本身增添一個的屬性.然后所有的實例化出來的vue實例對象...

neu 2019-08-22 18:09 評論0 收藏0
關(guān)于vue+element-ui項目的分頁，返回默認(rèn)顯示第一頁的問題解決

摘要：所以這就導(dǎo)致，頁面內(nèi)容正確，但是頁碼高亮依舊是第一頁解決辦法我們需要在之后刷新這個分頁組件或者讓分頁組件的后于之后加載到頁面。然后再次測試，發(fā)現(xiàn)完美解決問題。問題描述當(dāng)前頁面如下showImg(https://segmentfault.com/img/bVbjJ7a); 然后點擊頁碼跳到第3頁，然后在第三頁點擊頁面鏈接跳轉(zhuǎn)到新的頁面showImg(https://segmentfa...

YFan 2019-08-26 13:22 評論0 收藏0
Vue表格組件--GridManager Vue

摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。非必設(shè)項篩選條件列表數(shù)組對象。格式在使用時該參數(shù)為必設(shè)項。并且使用服務(wù)需要提前通過將注冊至全局組件。刷新或更新查詢條件或其它更多請直接訪問查看當(dāng)前版本 GridManager Vue 基于 Vue 的 GridManager 封裝, 用于便捷的在 Vue 中使用GridManager. 除過Vue特性外，其它API與GridManag...

khs1994 2019-08-23 16:46 評論0 收藏0
讀?VuePress（四）插件機制的設(shè)計

前言從 9 月份開始，vuepress 源碼進行了重新設(shè)計和拆分。先是開了個 next 分支，后來又合并到 master 分支，為即將發(fā)布的 1.x 版本做準(zhǔn)備。最主要的變化是：大部分的全局功能都被拆分成了插件的形式，以可插拔的方式來支撐 vuepress 的運作，這一點很像 webpack。具體架構(gòu)如下： showImg(https://user-gold-cdn.xitu.io/2019...

April 2019-05-22 16:41 評論0 收藏0
vue輪播圖插件之vue-awesome-swiper

摘要：移動端輪播圖插件，在使用圖形界面插件中的組件無法實現(xiàn)觸摸滑動后，轉(zhuǎn)而使用插件安裝我這里安裝的是下面的這個版本使用全局導(dǎo)入樣式的話，我這里有用到分頁器，就在全局中引入了樣式組件引入在中使用常見的小圓點移動端輪播圖插件，在使用iview圖形界面插件中的carousel組件無法實現(xiàn)觸摸滑動后，轉(zhuǎn)而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...

binta 2019-08-23 12:00 評論0 收藏0