分頁元件——vue
專案開發中,經常會遇到分頁功能,也會經常涉及元件化開發和元件複用,下列用vue對分頁元件進行了簡單封裝,具體程式碼如下:
原始碼:
(1)app.vue程式碼段:
(2)pagination.vue程式碼片段:<template> <div id="app"> <v-pagination :cur.sync="cur" :all.sync="all" @listen="monitor"></v-pagination> <p>{{msg}}</p> </div> </template> <script> import pagination from './components/pagination.vue'; export default { name: 'app', data () { return{ // 當前頁碼 cur: 1, // 總頁數 all: 100, msg: '' }; }, components: { // 引用元件 'v-pagination': pagination }, created() { this.msg = "當前頁為:" + this.cur; }, methods: { monitor: function (data) { // 翻頁事件 this.msg = "當前頁為:" + data; } } }; </script> <style lang="scss"></style>
<template> <div class="page-bar"> <ul> <li><a :class="setButtonClass(0)" v-on:click="prvePage(curIndex)">上一頁</a></li> <li v-for="index in indexs" v-bind:class="{ active: curIndex == index }"> <a v-on:click="btnClick(index)">{{ index < 1 ? "..." : index }}</a> </li> <li><a :class="setButtonClass(1)" v-on:click="nextPage(curIndex)">下一頁</a></li> </ul> </div> </template> <script> export default { props: ['cur', 'all'], data() { return{ curIndex: 1 }; }, computed: { indexs: function () { var left = 1; var right = this.all; var ar = []; if (this.all >= 11) { if (this.curIndex > 5 && this.curIndex < this.all - 4) { left = this.curIndex - 5; right = this.curIndex + 4; } else { if (this.curIndex <= 5) { left = 1; right = 10; } else { right = this.all; left = this.all - 9; } } } while (left <= right) { ar.push(left); left++; } if (ar[0] > 1) { ar[0] = 1; ar[1] = -1; } if (ar[ar.length - 1] < this.all) { ar[ar.length - 1] = this.all; ar[ar.length - 2] = 0; } return ar; } }, methods: { // 頁碼點選事件 btnClick: function (data) { if (data < 1) return; if (data != this.curIndex) { this.curIndex = data; this.$emit('listen', data); console.log(data); } }, // 下一頁 nextPage: function (data) { if (this.curIndex >= this.all) return; this.btnClick(this.curIndex + 1); }, // 上一頁 prvePage: function (data) { if (this.curIndex <= 1) return; this.btnClick(this.curIndex - 1); }, // 設定按鈕禁用樣式 setButtonClass: function (isNextButton) { if (isNextButton) { return this.curIndex >= this.all ? "page-button-disabled" : ""; } else { return this.curIndex <= 1 ? "page-button-disabled" : ""; } } } } </script> <style lang="scss"> @import "../style/pagination.css"; </style>
(3)pagination.css程式碼片段:
(4)main.js程式碼片段:ul, li {margin: 0px;padding: 0px;} .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .page-button-disabled { color:#ddd !important; } .page-bar li { list-style: none; display: inline-block; } .page-bar li:first-child > a { margin-left: 0px; } .page-bar a { border: 1px solid #ddd; text-decoration: none; position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; cursor: pointer; } .page-bar a:hover { background-color: #eee; } .page-bar .active a { color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; } .page-bar i { font-style: normal; color: #d44950; margin: 0px 4px; font-size: 12px; }
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
(5)效果圖:
相關推薦
分頁元件vue和jsp版本
vue版本 <template> <div class="com-vscroll"> <slot name="mcontent"></slot> <div class="loadcss"> &l
ElementUI分頁元件+Vue
一. ElementUI分頁元件 1 官網 2 入門案例: 第一步:建立vue的基本頁面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
分頁元件——vue
專案開發中,經常會遇到分頁功能,也會經常涉及元件化開發和元件複用,下列用vue對分頁元件進行了簡單封裝,具體程式碼如下: 原始碼: (1)app.vue程式碼段: <template> <div id="app"> <v-pagin
100行程式碼實現一個vue分頁元件
今天用vue來實現一個分頁元件,總體來說,vue實現比較簡單,樣式部分模仿了elementUI。所有程式碼的原始碼可以再github上下載的到:下載地址 先來看一下實現效果: 點選檢視效果 整體思路 我們先看一下使用到的檔案的目錄: 我們在 pageComponentsTe
基於Vue.js的表格分頁元件
最近小熙在做Vue有關的專案需要前端分頁外掛,看到篇不錯的,特此轉載分享 有一段時間沒更新文章了,主要是因為自己一直在忙著學習新的東西而忘記分享了,實在慚愧。 這不,大半夜發文更一篇文章,分享一個自己編寫的一個Vue的小元件,名叫BootPage。 不瞭解Vue.js的
vue分頁元件
分頁元件接收引數有(pageNum)總頁數,返回父元件引數有(jumpData)頁碼數 實現思路是,先獲取資料的總頁數,把總頁數放入分頁元件裡面初始化按鈕, 每點選頁數按鈕或者上一頁,下一頁都會觸發返回頁碼數的資料給父元件, 父元件才是請求資料,然後渲染列表,實現了分頁效果 &
vue 分頁元件及props傳參
export default { name:'page', props: { // 用於記錄總頁碼,可由父元件傳過來 pageNo: { type: Number, default: 1 }, // 用於記錄當前頁數,這個與父元件進行資料互動來
vue實現一個分頁元件
Vue.component("page",{ template:"#page", data:function(){ return{ current:1, showItem:5, al
vue分頁元件專案實踐
最近開發後臺專案需要寫一個vue的分頁元件,所以把寫好的元件分享到這個上面加深一下印象: 看了下寫的還是比較多的最開始是父子元件之間的通訊。 父元件container裡面的內容 <template> //
Vue 分頁元件 v2.0
背景 之前也寫過一個分頁元件,非常簡潔的一個分頁元件。 效果圖: 傳送門 點選預覽 程式碼也很簡單,看看就懂了。當頁數多起來的時候,問題也就來了。 這.......迫不得已,我把頁碼顯示的去掉,就成了 看著是沒啥問題,可是需求方不樂意了。。。 他們
手把手教你使用Vue/React/Angular三大框架開發Pagination分頁元件
DevUI是一支兼具設計視角和工程視角的團隊,服務於華為雲DevCloud平臺和華為內部數箇中後臺系統,服務於設計師和前端工程師。官方網站:devui.designNg元件庫:ng-devui(歡迎Star) 引言 “他在正午、黃昏,在一天裡的許多時刻去感受它、記錄它,
milo的分頁元件的使用
步驟: 1.需要引入milo.js 2.手寫一個分頁的樣式 3.分頁html程式碼 4.分頁js程式碼 <script src="//ossweb-img.qq.com/images/js/mobile_bundle/milo.js"></script>
Django框架(十五)—— Django分頁元件
Django分頁元件 一、分頁器 資料量大的話,可以分頁獲取,檢視 例如:圖書管理中,如果有成千上萬本書,要是都在一個頁面中渲染出來,會影響頁面美觀,所以就要用分頁器分頁渲染 二、分頁器的使用 基本寫法 基本寫法: 後端: 總資料拿出來 生成分頁器Pagin
Django框架(十四)—— Django分頁元件
Django分頁元件 一、分頁器 資料量大的話,可以分頁獲取,檢視 例如:圖書管理中,如果有成千上萬本書,要是都在一個頁面中渲染出來,會影響頁面美觀,所以就要用分頁器分頁渲染 二、分頁器的使用 基本寫法 基本寫法: 後端: 總資料拿出來 生成分頁器Pagin
angular2分頁元件
建立一個分頁包 pagination,然後在裡面依次建立幾個檔案: page.component.html 分頁元件的標籤內容 page.conponent.ts 分頁元件定義 pagination.ts 分頁元件所需配置資訊的物件
怎樣將分頁元件居中
在網上我們下載的jQuery外掛(分頁),引入的js和css檔案之後,簡單的修改一下jQuery對分頁的顯示要求後,我們可以看到在指定的<div>區域中出現分頁的元件。 <body> <div id="callBackPagination" cla
【EasyUI篇】Pagination分頁元件
微信公眾號: 關注可瞭解更多的教程。問題或建議,請公眾號留言; 17.Pagination分頁元件 注意 這個元件需要配合後臺實現,老規矩,使用SSM JSP檔案 <%-- Created by IntelliJ IDEA.
Bootstrap分頁元件居中
在網上我們下載的jQuery外掛(分頁),引入的js和css檔案之後,簡單的修改一下jQuery對分頁的顯示要求後,我們可以看到在指定的<div>區域中出現分頁的元件。 <bod
DRF之註冊響應分頁元件
註冊器 註冊器的作用就是以後我們不用自己手動的一條條的敲路徑了,它可以幫助哦們直接去找對應的路由,不用傳參了,知道這一點就可以了,不多說還是,上程式碼例項 第一步:匯入模組from django.urls import re_path,include from rest_framewor
Mybatis+AngularJS +pagination.js分頁元件實現頁面分頁
前提條件: 搭建好SSM框架,或者其他框架 一、建立分頁結果類 public class PageResult implements Serializable{ private long total;//總記錄數 private List rows;//當前頁結果