집 > 기사 > 웹 프론트엔드 > vue.js를 사용하여 페이징 구성 요소 만들기

vue.js를 사용하여 페이징 구성 요소 만들기

高洛峰원래의: 2017-01-16 11:55:101077검색

저는 vue.js를 한동안 공부하다가 연습용 작은 컴포넌트 두 개를 만드는 데 사용했습니다.
패키징에는 webpack을 사용하고 있어서 사용법이 익숙합니다.
소스코드는 글 말미의 github 주소에 있습니다.

첫 번째는 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>

c0d5f5130fcd018cc117943bd2c43ff616b28748ea4df4d9c2150843fecfba68 안에 앱 구성요소를 넣었습니다. webpack을 통해 패키징할 때, Entry js 파일은 app.vue 컴포넌트
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
 }
});

를 소개하는 데 사용되는 Entry.js입니다. app 컴포넌트를 살펴보겠습니다.

<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>

comment.vue와 page.vue라는 두 개의 하위 구성 요소가 있으며 데이터의 동적 바인딩을 통해 상위-하위 구성 요소 통신이 수행됩니다. 그런 것 같아요. 현재 페이지는 page.vue에서 app.vue로 전달되어야 하므로 여기서는 양방향 바인딩을 사용하고 나머지는 params, url, isSync, 즉 백그라운드에서 데이터를 요청하는 것과 동기식 또는 비동기식으로 작동하려면<물론 여기서는 배경 데이터를 테스트하지 않았습니다. 현재 정적 데이터는 js를 통해 직접 생성됩니다. 로드: 원래 의도는 댓글을 로드하기 위해 페이지 번호로 이동할 때 현재 댓글에 대해 투명도 0.5의 마스크를 로드하는 것이었지만, Ajax는 콜백 기능을 통해 마스크를 취소합니다. 강제로 써야만 하는데 소용이 없습니다..hasComment: 댓글 컴포넌트가 처음 로드될 때 전체 데이터 길이를 요청합니다. 데이터가 없으면 댓글 컴포넌트의 레이아웃 내용이 표시되지 않음

·curPageIndex·: 이러한 데이터는 props

를 사용하여 상위 구성 요소 앱을 통해 전달되므로 기본값과 유형을 설정하는 것이 더 좋습니다.

page.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>

는 주로 컴포넌트 이벤트의 애플리케이션입니다. = 가장 일반적인 클릭 이벤트이며, 클래스와 스타일의 바인딩을 curPageIndex 및 this.pageIndex에 따라 비교합니다. , 이 클래스가 있는지 확인하고 계산된 속성을 통해 페이지 번호 배열을 가져옵니다. 현재 페이지에 따라 변경되므로 생성 시 전체 페이지 번호가 계산됩니다.
마지막은 현재 정적 데이터를 얻기 위해 생성된 js 파일입니다.

<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>

그렇습니다.

vue.js를 사용하여 페이징 구성 요소를 만드는 것과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：Vue.js 컴포넌트 트리는 무한 트리 메뉴를 구현합니다.다음 기사：Vue.js 컴포넌트 트리는 무한 트리 메뉴를 구현합니다.

vue.js를 사용하여 페이징 구성 요소 만들기

관련 기사