Verwenden Sie vue.js, um Paging-Komponenten zu erstellen-js-Tutorial-php.cn

Ich habe vue.js eine Weile studiert und daraus zwei kleine Komponenten zum Üben erstellt.
Ich verwende Webpack zum Verpacken, daher bin ich mit seiner Verwendung vertraut.
Der Quellcode befindet sich unter der Github-Adresse am Ende des Artikels.

Die erste ist index.html

<!DOCTYPE html>
<html>
<head>
 <title>Page</title>
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
   font-family: &#39;Open Sans&#39;, Arial, sans-serif;
  }
  .contianer {
   width: 50%;
   height: auto;
   margin: 20px auto;
  }
  article {
   margin-bottom: 50px;
  }
 </style>
</head>
<body>
 <div class=&#39;contianer&#39;>
  <article>
   文章内容...
  </article>
  <div id=&#39;main&#39;>
   <app></app> 
  </div>
 </div>
 <script type="text/javascript" src=&#39;bundle.js&#39;></script>
</body>
</html>

Nach dem Login kopieren

Ich habe die App-Komponente in

< 🎜 eingefügt >Nach dem Packen über Webpack lautet die Eintrags-JS-Datei „entry.js“, mit der die app.vue-Komponente
entry.js

let Vue = require(&#39;vue&#39;);
 
import App from &#39;./components/app&#39;;
 
let app_vue = new Vue({
 el: &#39;#main&#39;,
 components: {
  app: App
 }
});

Nach dem Login kopieren

eingeführt wird. Werfen wir einen Blick darauf in dieser App nächste Komponente

<style type="text/css" scoped>
  
</style>
 
<template>
 <comment :cur-page-index="curPageIndex" :each-page-size="eachPageSize" :comment-url="commentUrl"
  :comment-params="commentParams" :comment-is-sync="commentIsSync">
   
 </comment>
 <page :cur-page-index.sync="curPageIndex" :each-page-size="eachPageSize" :page-url="pageUrl"
  :page-params="pageParams" :page-is-sync="pageIsSync">
 
 </page>
</template>
 
<script type="text/javascript">
 import Comment from &#39;./comment&#39;;
 import Page from &#39;./page&#39;;
 
 export default {
  data () {
   return {
    curPageIndex: 1,
    eachPageSize: 7,
   }
  },
  components: {
   comment: Comment,
   page: Page
  },
 }
</script>

Nach dem Login kopieren

Es verfügt über zwei Unterkomponenten, nämlich comment.vue und page.vue, die über die Kommunikation zwischen übergeordneten und untergeordneten Komponenten erfolgen Dynamische Datenbindung. Ich denke schon, die aktuelle Seite sollte von page.vue an app.vue übergeben werden, daher verwenden wir hier die bidirektionale Bindung und den Rest wie Parameter, URL, isSync, also was Daten anfordert aus dem Hintergrund und ob es sich um einen synchronisierten oder asynchronen Betrieb handelt. Natürlich habe ich die Hintergrunddaten hier nicht getestet. Derzeit werden statische Daten direkt von js generiert.

Werfen Sie als Nächstes einen Blick auf die Kommentarkomponente von comment.vue

<style type="text/css" scoped>
 .comt-mask {
  opacity: 0.5;
 }
 .comt-title {
   
 }
 .comt-line {
  width: 100%;
  height: 2px;
  background-color: #CCC;
  margin: 10px 0;
 }
 .comt-wrap {
   
 }
 .comt-user {
  float: left;
 }
 .comt-img {
  width: 34px;
  height: 34px;
  border-radius: 17px;
 }
 .comt-context {
  margin: 0 0 0 60px;
 }
 .comt-name {
  color: #2B879E;
  margin-bottom: 10px;
  font-size: 18px;
 }
</style>
 
<template>
 <div v-if="hasComment" :class="{&#39;comt-mask&#39;: loading}">
  <h3 class=&#39;comt-title&#39;>{{ totalCommentCount }} 条评论</h3>
  <div class="comt-line"></div>
  <div class="comt-wrap" v-for="comment of commentArr">
   <div class="comt-user">
    <img src=&#39;{{ comment.avatar }}&#39; class="comt-img"/>
   </div>
   <div class="comt-context">
    <p class="comt-name">{{ comment.name }}</p>  
    <p>
     {{ comment.context }}
    </p>
   </div>
   <div class="comt-line"></div>
  </div>
 </div>
</template>
 
<script type="text/javascript">
 import {getCommentData, getTotalCommentCount} from &#39;./getData&#39;;
 
 export default {
  props: {
   curPageIndex: {
    type: Number,
    default: 1,
   },
   eachPageSize: {
    type: Number,
    default: 7,
   },
   commentUrl: {
    type: String,
    default: &#39;&#39;,
   },
   commentParams: {
    type: Object,
    default: null,
   },
   commentIsSync: {
    type: Boolean,
    default: true,
   },
  },
  data () {
   return {
    totalCommentCount: 0,
    hasComment: false,
    loading: true,  
   }
  },
  computed: {
   commentArr () {
    this.loading = true;
    let res = getCommentData(this.commentUrl, this.commentParams, this.commentIsSync, this.curPageIndex, this.eachPageSize);
    this.loading = false;
    return res;
   },
  },
  created () {
   let cnt = getTotalCommentCount(this.commentUrl, this.commentParams);
   this.totalCommentCount = cnt;
   this.hasComment = cnt > 0;
  }
 }
</script>

Nach dem Login kopieren

Die getData.js hier werden unten erwähnt und dort erhalten wir die Daten.

Laden: Die ursprüngliche Absicht besteht darin, beim Springen zur Seitenzahl zum Laden von Kommentaren eine Maske mit einer Transparenz von 0,5 für den aktuellen Kommentar zu laden, und dann bricht Ajax die Maske über seine Rückruffunktion ab. Dies kann und kann nun nicht erreicht werden Nur zum Schreiben gezwungen werden, ist jedoch nutzlos..
hasComment: Wenn die Kommentarkomponente zum ersten Mal geladen wird, fordern wir die gesamte Datenlänge an nicht angezeigt werden
·curPageIndex·: Diese Daten werden über die übergeordnete Komponenten-App unter Verwendung von Requisiten
weitergegeben. Für uns ist es besser, einen Standardwert und -typ festzulegen.
page.vue

<style type="text/css" scoped>
 .page {
  text-align: center;
  margin: 30px;
 }
 .page-btn {
  color: gray;
  background-color: white;
  border: white;
  width: 30px;
  height: 30px;
  margin: 5px;
  font-size: 18px;
  outline: none;
 }
 .page-btn-link {
  cursor: Crosshair;
 }
 .page-btn-active {
  border: 1px solid gray;
  border-radius: 15px;
 }
</style>
 
<template>
 <div class="page">
  <button v-for="pageIndex of pageArr" track-by=&#39;$index&#39; :class="{&#39;page-btn&#39;: true, &#39;page-btn-active&#39;:
   this.curPageIndex === pageIndex, &#39;page-btn-link&#39;: checkNum(pageIndex)}"
   @click="clickPage(pageIndex)" >
    {{ pageIndex }}
  </button> 
 </div>
</template>
 
<script type="text/javascript">
 import {getTotalPageCount} from &#39;./getData&#39;;
 
 export default {
  props: {
   totalPageCount: {
    type: Number,
    default: 0,
   },
   curPageIndex: {
    type: Number,
    default: 1,
   },
   eachPageSize: {
    type: Number,
    default: 7,
   },
   pageAjcn: {
    type: Number,
    default: 4,
   },
   pageUrl: {
    type: String,
    default: &#39;&#39;,
   },
   pageParams: {
    type: Object,
    default: null,
   },
   pageIsSync: {
    type: Boolean,
    default: true,
   }     
  },
  data () {
   return {
 
   }
  },
  computed: {
   pageArr () {
    let st = 1,
     end = this.totalPageCount,
     cur = this.curPageIndex,
     ajcn = this.pageAjcn,
     arr = [],
     left = Math.floor(ajcn / 2),
     right = ajcn - left;
      
    if (end == 0 || cur == 0) {
     return arr;
    } else {
     console.log(st, end, cur, left, right);
     arr.push(st);
     console.log(st+1, cur-left);
     if (st + 1 < cur - left) {
      arr.push(&#39;...&#39;);
     }
     for (let i = Math.max(cur - left, st + 1); i <= cur - 1; ++i) {
      arr.push(i);
     }
     if (cur != st) {
      arr.push(cur);
     }
     for (let i = cur + 1; i <= cur + right && i <= end - 1 ; ++i) {
      arr.push(i);
     }
     if (cur + right < end - 1) {
      arr.push(&#39;...&#39;);
     }
     if (end != cur) {
      arr.push(end);
     }
     return arr;
    }
   }
  },
  methods: {
   clickPage (curIndex) {
    if (Number.isInteger(curIndex)) {
     this.curPageIndex = curIndex;
    }
   },
   checkNum (curIndex) {
    return Number.isInteger(curIndex);
   }  
  }，
  created () {
   this.totalPageCount = getTotalPageCount(this.pageUrl,  this.pageParams, this.pageIsSync,
    this.eachPageSiz);
  }
 }
</script>

Nach dem Login kopieren

ist laut curPageIndex und this hauptsächlich eine Anwendung von Komponentenereignissen = dem häufigsten Klickereignis und der Verknüpfung von Klasse und Stil. pageIndex Um zu vergleichen und festzustellen, ob Sie über diese Klasse verfügen, verwenden Sie berechnete Eigenschaften, um das Seitenzahlen-Array zu erhalten. Da es sich entsprechend der aktuellen Seite ändert, wird die Gesamtseitenzahl beim Erstellen berechnet.

Die letzte ist die aktuell generierte js-Datei, um statische Daten zu erhalten

// let data = {
//  avatar: &#39;&#39;, 头像
//  name: &#39;&#39;, 用户名
//  context: &#39;&#39;, 评论内容
// }
let dataArr = [];
 
function randomStr (len) {
 return Math.random().toString(36).substr(len);
}
 
function initData () {
 for (var i = 0; i<45 ; ++i) {
  let _avator = "./resources/" + i%7 + ".jpg";
  let _name = randomStr(20);
  let _context = randomStr(2);
  dataArr.push({
   avatar: _avator,
   name: _name,
   context: _context
  });
 }
}
 
if (!dataArr.length) {
 initData();
}
 
export function getCommentData (url = &#39;&#39;, params = null, isSync = true, curPageIndex = 1, eachPageSize = 7) {
 /* ajax */
 let st = (curPageIndex - 1) * eachPageSize;
 let end = st + eachPageSize;
 
 return dataArr.slice(st, end);
}
 
export function getTotalCommentCount(url = &#39;&#39;, params = null, isSync = true) {
 /* ajax */
 return dataArr.length;
}
 
export function getTotalPageCount(url = &#39;&#39;, params = null, isSync = true, eachPageSize = 7) {
 /* ajax */
 return Math.floor((dataArr.length + eachPageSize -1 ) / eachPageSize);
}

Nach dem Login kopieren

Das ist es.

Weitere Artikel zur Verwendung von vue.js zum Erstellen von Paging-Komponenten finden Sie auf der chinesischen PHP-Website!