亚州不卡av在线,亚洲有码www

vue bootstrap有一個(gè)很強(qiáng)大的組件bootstrap-vue。但是這個(gè)組件的分頁貌似并不支持前后端分離的分頁。
我至少是沒看出來。如果有看出來的請(qǐng)告訴我。
如果有用這個(gè)組件的同學(xué)可以跟我交流。
QQ：871966163
直通車bootstrap-vue

自己寫了個(gè)分頁組件，開箱即用。如有bug歡迎留言。
嫌麻煩大佬可以直通github，clone項(xiàng)目直接使用
vue-bootstrap-pagination

另外封裝了一個(gè) 渲染函數(shù)&jsx的分頁組件，有需要可以加QQ交流

jsx

組件

1、參數(shù)

（1）props參數(shù)

total：數(shù)據(jù)總數(shù)，這個(gè)是必傳參數(shù)。比如總數(shù)據(jù)有1000條，10000條。 數(shù)量為0，負(fù)數(shù)或者非數(shù)字字符串時(shí)，total取值為1，也就是最小值為1
size：每一頁的數(shù)據(jù)條數(shù)。比如每一頁顯示10條，15條。 數(shù)字為0，負(fù)數(shù)或者非數(shù)字字符串時(shí)，size取值為10
currentPage：分頁初始頁碼，就是第一次進(jìn)入有分頁的這個(gè)頁面顯示的頁碼。記住是第一次。數(shù)字為0，附屬或者為非數(shù)字字符串時(shí)，currentPage取值為1，也就是最小值為1

這個(gè)數(shù)據(jù)是可以在操作分頁的時(shí)候修改的，方便 vuex 記住當(dāng)前頁面，然后賦值初始頁面，實(shí)現(xiàn)在第 N 頁查看某一條數(shù)據(jù)進(jìn)入另一個(gè)頁面回來時(shí)還是會(huì)停留在第 N 頁的效果，或者看到第 N 頁了，點(diǎn)擊其他頁面，再點(diǎn)擊回來，仍然會(huì)停留在第 N 頁。

這個(gè)功能需要配合 $\color{red}{getCurrentPage}$

limit：分頁元素。分頁條顯示的元素?cái)?shù)量。數(shù)字小于5或者為非數(shù)字字符串時(shí)，limit取值為5，也就是最小值為5
比如limit=5，會(huì)顯示如下：

分頁元素為5

分頁條數(shù)為5

分頁條數(shù)為5

也就是除了左右兩邊箭頭按鈕會(huì)顯示的分頁元素?cái)?shù)量

$\color{blue}{align}$ ：分頁位置, left:左邊，center:居中, right:右邊。默認(rèn)在左邊

左邊

align=center

中間

align=right

右邊.png
firstFunction：點(diǎn)擊跳轉(zhuǎn)到第一頁觸發(fā)函數(shù)
prevFunction：上一頁按鈕觸發(fā)函數(shù)
currentFunction：點(diǎn)擊頁碼觸發(fā)函數(shù)
nextFunction：下一頁按鈕觸發(fā)函數(shù)
lastFunction：最后一頁按鈕觸發(fā)函數(shù)
sizeFunction：改變每頁數(shù)量觸發(fā)函數(shù)

  props: {
    //總數(shù)據(jù)
    total: {
      type: [Number, String],
      required: true
    },
    // 每頁數(shù)量
    size: {
      type: [Number, String],
      default: 10
    },
    // 初始頁碼
    currentPage: {
      type: [Number, String],
      default: 1
    },
    // 分頁顯示數(shù)量
    limit: {
      type: [Number, String],
      default: 5
    },
    // 分頁位置
    align: {
      default: "left",
      type: String
    },
    // 跳轉(zhuǎn)第一頁按鈕觸發(fā)函數(shù)
    firstFunction: {
      type: Function,
      required: true
    },
    // 上一頁按鈕觸發(fā)函數(shù)
    prevFunction: {
      type: Function,
      required: true
    },
    // 點(diǎn)擊頁碼觸發(fā)函數(shù)
    currentFunction: {
      type: Function,
      required: true
    },
    // 下一頁按鈕觸發(fā)函數(shù)
    nextFunction: {
      type: Function,
      required: true
    },
    // 最后一頁按鈕觸發(fā)函數(shù)
    lastFunction: {
      type: Function,
      required: true
    },
    // 修改每頁數(shù)量觸發(fā)函數(shù)
    sizeFunction: {
      type: Function
    }
  },

（2）data參數(shù)

tempalteCurrentPage：分頁當(dāng)前頁碼。也就是激活的頁碼

  data() {
    return {
      tempalteCurrentPage: ""
    };
  },

2、方法methods

toInteger：字符串轉(zhuǎn)為數(shù)字類型
_firstFunction：跳轉(zhuǎn)第一頁按鈕觸發(fā)函數(shù)
_prevFunction：上一頁按鈕觸發(fā)函數(shù)
_currentFunction：點(diǎn)擊頁碼觸發(fā)函數(shù)
_nextFunction：下一頁按鈕觸發(fā)函數(shù)
_lastFunction：最后一頁按鈕觸發(fā)函數(shù)
_sizeFunction：修改每頁數(shù)量觸發(fā)函數(shù)

  methods: {
    // 字符串轉(zhuǎn)為數(shù)字類型 因?yàn)閜rops會(huì)接收字符串，所以需要進(jìn)行轉(zhuǎn)換
    toInteger(val) {
      return parseInt(val, 10);
    },
    // 跳轉(zhuǎn)第一頁按鈕觸發(fā)函數(shù)
    _firstFunction() {
      if (this.firstFunction) {
        this.tempalteCurrentPage = 1;
        this.firstFunction();
      }
    },
    // 上一頁按鈕觸發(fā)函數(shù)
    _prevFunction() {
      if (this.prevFunction) {
        this.tempalteCurrentPage = this.tempalteCurrentPage - 1;
        this.prevFunction();
      }
    },
    // 點(diǎn)擊頁碼觸發(fā)函數(shù)
    _currentFunction(item) {
      if (this.currentFunction) {
        this.tempalteCurrentPage = item;
        this.currentFunction();
      }
    },
    // 下一頁按鈕觸發(fā)函數(shù)
    _nextFunction() {
      if (this.nextFunction) {
        this.tempalteCurrentPage = this.tempalteCurrentPage + 1;
        this.nextFunction();
      }
    },
    // 最后一頁按鈕觸發(fā)函數(shù)
    _lastFunction() {
      if (this.lastFunction) {
        this.tempalteCurrentPage = this.nlyPgPages;
        this.lastFunction();
      }
    },
    // 修改每頁數(shù)量觸發(fā)函數(shù)
    _sizeFunction() {
      if (this.sizeFunction) {
        this.sizeFunction();
      }
    },
    // 分頁元素添加上一頁，最后一頁，第一頁，下一頁等按鈕
    _tempalteArray() {
      // this.nlyPgItemArray為 computed 中 nlyPgItemArray屬性
      let nlyPgItemArrayAll = this.nlyPgItemArray;
      nlyPgItemArrayAll.splice(0, 0, "?");
      nlyPgItemArrayAll.splice(0, 0, "??");
      nlyPgItemArrayAll.push("?");
      nlyPgItemArrayAll.push("??");

      return nlyPgItemArrayAll;
    }
  },

3、計(jì)算屬性computed

nlyPgTotal：轉(zhuǎn)換總頁轉(zhuǎn)為數(shù)字類型
nlyPgSize：每頁數(shù)量轉(zhuǎn)為數(shù)字類型
nlyPgCurrentPage：當(dāng)前頁數(shù)轉(zhuǎn)為數(shù)字類型
nlyPgLimit：分頁顯示元素轉(zhuǎn)為數(shù)字類型
nlyPgPages：計(jì)算總頁數(shù)
nlyPgItemArray：生成不包括上一頁，下一頁等按鈕的分頁元素
alignClass：分頁位置
tempalteArray：生成包括最后一頁，上一頁，第一頁，下一頁等按鈕的元素，最終分頁元素

  computed: {
    // 轉(zhuǎn)換總頁轉(zhuǎn)為數(shù)字類型
    nlyPgTotal: function() {
      return isNaN(this.toInteger(this.total))
        ? 1
        : this.toInteger(this.total) <= 0
        ? 1
        : this.toInteger(this.total);
    },
    // 每頁數(shù)量轉(zhuǎn)為數(shù)字類型
    nlyPgSize: function() {
      return isNaN(this.toInteger(this.size))
        ? 10
        : this.toInteger(this.size) <= 0
        ? 10
        : this.toInteger(this.size);
    },
    // 當(dāng)前頁數(shù)轉(zhuǎn)為數(shù)字類型
    nlyPgCurrentPage: function() {
      return this.toInteger(this.tempalteCurrentPage);
    },
    // 分頁顯示元素轉(zhuǎn)為數(shù)字類型
    nlyPgLimit: function() {
      return isNaN(this.toInteger(this.limit))
        ? 5
        : this.toInteger(this.limit) <= 4
        ? 5
        : this.toInteger(this.limit);
    },
    // 計(jì)算總頁數(shù)
    nlyPgPages: function() {
      return Math.ceil(this.nlyPgTotal / this.nlyPgSize);
    },
    // 生成不包括上一頁，下一頁等按鈕的分頁元素
    nlyPgItemArray: function() {
      if (
        this.nlyPgCurrentPage + 1 <= this.nlyPgLimit &&
        this.nlyPgPages < this.nlyPgLimit
      ) {
        // 當(dāng)前頁碼+1小于分頁元素且總頁數(shù)大于分頁元素
        const itemList = Array.from({ length: this.nlyPgPages }).map(
          (v, k) => k + 1
        );
        return itemList;
      } else if (
        this.nlyPgCurrentPage + 1 <= this.nlyPgLimit &&
        this.nlyPgPages == this.nlyPgLimit
      ) {
        // 當(dāng)前頁碼+1小于分頁元素且總頁數(shù)等于分頁元素
        const itemList = Array.from({ length: this.nlyPgLimit }).map(
          (v, k) => k + 1
        );
        return itemList;
      } else if (
        this.nlyPgCurrentPage + 2 <= this.nlyPgLimit &&
        this.nlyPgPages > this.nlyPgLimit
      ) {
        // 當(dāng)前頁碼+2小于分頁元素且總頁數(shù)大于分頁元素
        const itemList = Array.from({ length: this.nlyPgLimit - 1 }).map(
          (v, k) => k + 1
        );
        itemList.push("···");
        return itemList;
      } else if (
        this.nlyPgPages - this.nlyPgCurrentPage + 2 < this.nlyPgLimit &&
        this.nlyPgPages > this.nlyPgLimit
      ) {
        // 總頁數(shù)-當(dāng)前頁碼+2小于分頁元素且總頁數(shù)大于分頁元素
        const itemList = Array.from({ length: this.nlyPgLimit - 1 }).map(
          (v, k) => k + (this.nlyPgPages - this.nlyPgLimit + 2)
        );
        itemList.splice(0, 0, "···");
        return itemList;
      } else if (
        // 總頁數(shù)-當(dāng)前頁碼+2小于分頁元素且總頁數(shù)等于分頁元素
        this.nlyPgPages - this.nlyPgCurrentPage + 2 < this.nlyPgLimit &&
        this.nlyPgPages == this.nlyPgLimit
      ) {
        const itemList = Array.from({ length: this.nlyPgLimit - 1 }).map(
          (v, k) => k + (this.nlyPgPages - this.nlyPgLimit + 2)
        );
        return itemList;
      } else {
        // 其他情況
        const itemList = Array.from({ length: this.nlyPgLimit - 2 }).map(
          (v, k) =>
            k + this.nlyPgCurrentPage - Math.ceil(this.nlyPgLimit / 2) + 2
        );
        itemList.splice(0, 0, "···");
        itemList.push("···");
        return itemList;
      }
    },
    // 分頁位置
    alignClass: function() {
      const align = this.align;
      if (align === "center") {
        return "justify-content-center";
      } else if (align === "end" || align === "right") {
        return "justify-content-end";
      }
      return "";
    },
    // 生成包括最后一頁，上一頁，第一頁，下一頁等按鈕的元素，最終分頁元素
    tempalteArray: function() {
      return this._tempalteArray();
    }
  },

4、頁面渲染created生命周期

  created() {
    // 初始化初始頁面
    this.tempalteCurrentPage = isNaN(this.toInteger(this.currentPage))
      ? 1
      : this.toInteger(this.currentPage) <= 1
      ? 1
      : this.toInteger(this.currentPage);
  },

5、頁面監(jiān)控watch

  watch: {
    // 暴露當(dāng)前頁碼給父組件（變化之前的，如果從第4頁跳轉(zhuǎn)到第5頁，父組件獲取的值是4）
    tempalteCurrentPage: function() {
      this.$emit("getCurrentPage", this.tempalteCurrentPage);
    },
    // 監(jiān)測(cè)父組件傳入的初始頁碼currentPage，發(fā)生變化就給分頁當(dāng)前頁碼賦值
    currentPage: function(newval, oldval) {
      if (newval != oldval) {
        this.tempalteCurrentPage = this.toInteger(this.currentPage);
      }
    },
    // 監(jiān)測(cè)總頁數(shù),當(dāng)頁數(shù)(即總數(shù)量發(fā)生變化的時(shí)候),如果當(dāng)前頁碼大于總頁數(shù),當(dāng)前頁碼變?yōu)樽畲箜撁?，否則不變,
    nlyPgPages: function(newval, oldval) {
      if (newval != oldval) {
        this.tempalteCurrentPage =
          this.tempalteCurrentPage > newval ? newval : this.tempalteCurrentPage;
      }
    },
    // 監(jiān)測(cè)每頁數(shù)量變化，發(fā)生變化的時(shí)候，重新執(zhí)行_sizeFunction()，不傳入組件參數(shù)sizeFunction也會(huì)執(zhí)行。
    nlyPgSize: function(newval, oldval) {
      if (newval != oldval) {
        this._sizeFunction();
      }
    }
  }

6、 css

<style>
.nly-pagination-item {
  cursor: pointer;
  color: #007bff;
}
</style>

7、 template

<template>
  <ul :class="'pagination ' + alignClass">
    <template v-for="(item, index) in tempalteArray">
      <!-- 跳轉(zhuǎn)第一頁按鈕 -->
      <template v-if="item == '??'">
        <!-- 當(dāng)前頁面為第一頁的時(shí)候禁用 -->
        <li
          class="page-item disabled"
          :key="index"
          v-if="nlyPgCurrentPage == 1"
        >
          <a class="page-link"> {{ item }}</a>
        </li>
        <!-- 當(dāng)前頁面不為第一頁的時(shí)候 -->
        <li
          class="page-item nly-pagination-item"
          :key="index"
          v-else
          @click="_firstFunction"
        >
          <a class="page-link"> {{ item }}</a>
        </li>
      </template>

      <!-- 上一頁按鈕 -->
      <template v-else-if="item == '?'">
        <!-- 當(dāng)前頁面為第一頁的時(shí)候禁用 -->
        <li
          class="page-item disabled"
          :key="index"
          v-if="nlyPgCurrentPage == 1"
        >
          <a class="page-link"> {{ item }}</a>
        </li>

        <!-- 當(dāng)前頁面不為第一頁的時(shí)候 -->
        <li
          class="page-item nly-pagination-item"
          :key="index"
          v-else
          @click="_prevFunction"
        >
          <a class="page-link"> {{ item }}</a>
        </li>
      </template>

      <!-- 省略按鈕 禁用 -->
      <template v-else-if="item == '···'">
        <li class="page-item disabled" :key="index">
          <a class="page-link"> {{ item }}</a>
        </li>
      </template>

      <!-- 跳轉(zhuǎn)到最后一頁按鈕 -->
      <template v-else-if="item == '??'">
        <!-- 當(dāng)前頁面為最后一頁的時(shí)候禁用 -->
        <li
          class="page-item disabled"
          :key="index"
          v-if="nlyPgCurrentPage == nlyPgPages"
        >
          <a class="page-link"> {{ item }}</a>
        </li>
        <!-- 當(dāng)前頁面不為最后一頁的時(shí)候 -->
        <li
          class="page-item nly-pagination-item"
          :key="index"
          v-else
          @click="_lastFunction"
        >
          <a class="page-link"> {{ item }}</a>
        </li>
      </template>

      <!-- 下一頁按鈕 -->
      <template v-else-if="item == '?'">
        <!-- 當(dāng)前頁面為最后一頁的時(shí)候禁用 -->
        <li
          class="page-item disabled"
          :key="index"
          v-if="nlyPgCurrentPage == nlyPgPages"
        >
          <a class="page-link"> {{ item }}</a>
        </li>
        <!-- 當(dāng)前頁面不為最后一頁的時(shí)候 -->
        <li
          class="page-item nly-pagination-item"
          :key="index"
          v-else
          @click="_nextFunction"
        >
          <a class="page-link"> {{ item }}</a>
        </li>
      </template>

      <!-- 當(dāng)前頁碼激活狀態(tài) -->
      <template v-else-if="item == tempalteCurrentPage">
        <li
          class="page-item active nly-pagination-item"
          :key="index"
          @click="_currentFunction(item)"
        >
          <a class="page-link"> {{ item }}</a>
        </li>
      </template>

      <!-- 點(diǎn)擊跳轉(zhuǎn)頁碼 -->
      <template v-else>
        <li
          class="page-item nly-pagination-item"
          :key="index"
          @click="_currentFunction(item)"
        >
          <a class="page-link"> {{ item }}</a>
        </li>
      </template>
    </template>
  </ul>
</template>

8、組件

1 新建一個(gè)vue項(xiàng)目，過程省略。這里用的vue cli3以上版本。
目錄如下

目錄
2 在components下建立一個(gè)NLYpagination.vue和index.js

新建文件

vue文件名字隨意，index最好不改，如果改了在接下來的main.js引入的時(shí)候也有改。
把上面的代碼放到NLYpagination.vue中。

注冊(cè)組件

打開剛剛建立的index.js，寫入以下代碼。注意import路徑

import NLYpagination from "../components/NLYpagination.vue";

export default {
  install: Vue => {
    Vue.component("NLY-pagination", NLYpagination);
  }
};

在main.js中引入添加以下代碼引入index.js

import pagination from "./components/index.js";
Vue.use(pagination);

完整的main.js應(yīng)該是這樣

main.js

9、 demo

在需要分頁組件的地方，使用組件就行。

<template>
    <NLY-pagination
      ref="pagination"
      :total="total"
      :size="size"
      :limit="limit"
      align="center"
      :currentPage="currentPage"
      :firstFunction="firstFunction"
      :prevFunction="prevFunction"
      :currentFunction="currentFunction"
      :nextFunction="nextFunction"
      :lastFunction="lastFunction"
      :sizeFunction="sizeFunction"
      @getCurrentPage="getCurrentPage"
    />
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1,
      total: 100,
      size: 10,
      limit: 5
    };
  },
  methods: {
    firstFunction() {
      console.log(
        `跳到第一頁: 從第 ${this.currentPage} 頁跳轉(zhuǎn)到 ${this.$refs["pagination"].tempalteCurrentPage} 頁`
      );
    },
    prevFunction() {
      console.log(
        `跳到上一頁: 從第 ${this.currentPage} 頁跳轉(zhuǎn)到 ${this.$refs["pagination"].tempalteCurrentPage} 頁`
      );
    },
    currentFunction() {
      console.log(
        `點(diǎn)擊跳轉(zhuǎn)到當(dāng)前點(diǎn)擊頁碼頁面: 從第 ${this.currentPage} 頁跳轉(zhuǎn)到 ${this.$refs["pagination"].tempalteCurrentPage} 頁`
      );
    },
    nextFunction() {
      console.log(
        `跳到下一頁: 從第 ${this.currentPage} 頁跳轉(zhuǎn)到 ${this.$refs["pagination"].tempalteCurrentPage} 頁`
      );
    },
    lastFunction() {
      console.log(
        `跳到最后一頁: 從第 ${this.currentPage} 頁跳轉(zhuǎn)到 ${this.$refs["pagination"].tempalteCurrentPage} 頁`
      );
    },
    sizeFunction() {
      console.log("修改每頁數(shù)量");
    },
    getCurrentPage(data) {
      this.currentPage = data;
    },
    getPages(val) {
      console.log(val);
    }
  }
};
</script>
<!--
total: 總數(shù)
size： 每頁數(shù)量，默認(rèn)10
currentPage: 初始頁碼
limit: 顯示頁碼個(gè)數(shù)
align：分頁位置,left左邊，center中間，right右邊，默認(rèn)左邊
firstFunction: 第一頁按鈕函數(shù)
prevFunction: 上一頁按鈕函數(shù)
currentFunction: 點(diǎn)擊頁碼函數(shù)
nextFunction: 下一頁頁碼函數(shù)
lastFunction: 最后一頁頁碼函數(shù)
sizeFunction: 修改每頁數(shù)量自動(dòng)執(zhí)行函數(shù)
 -->

演示效果如下：

pg.gif

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

vue bootstrap 分頁,可自定義按鈕操作函數(shù),自動(dòng)監(jiān)測(cè)每頁數(shù)據(jù)數(shù)量修改，可修改分頁元素顯示數(shù)量

vue bootstrap 分頁,可自定義按鈕操作函數(shù),自動(dòng)監(jiān)測(cè)每頁數(shù)據(jù)數(shù)量修改，可修改分頁元素顯示數(shù)量

另外封裝了一個(gè) 渲染函數(shù)&jsx的分頁組件，有需要可以加QQ交流

1、參數(shù)

（1）props參數(shù)

（2）data參數(shù)

2、方法methods

3、計(jì)算屬性computed

4、頁面渲染created生命周期

5、頁面監(jiān)控watch

6、 css

7、 template

8、組件

9、 demo

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue bootstrap 分頁,可自定義按鈕操作函數(shù),自動(dòng)監(jiān)測(cè)每頁數(shù)據(jù)數(shù)量修改，可修改分頁元素顯示數(shù)量

另外封裝了一個(gè) 渲染函數(shù)&jsx的分頁組件，有需要可以加QQ交流

1、 參數(shù)

（1）props參數(shù)

（2）data參數(shù)

2、 方法methods

3、 計(jì)算屬性computed

4、 頁面渲染created生命周期

5、 頁面監(jiān)控watch

6、 css

7、 template

8、 組件

9、 demo

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

另外封裝了一個(gè) 渲染函數(shù)&jsx的分頁組件，有需要可以加QQ交流

1、參數(shù)

2、方法methods

3、計(jì)算屬性computed

4、頁面渲染created生命周期

5、頁面監(jiān)控watch

6、 css

8、組件

9、 demo