vue 의 사용자 정의 페이지 플러그 인 구성 요소 의 예제

소개 하 겠 습 니 다.이미 많은 vue 페이지 의 구성 요소 가 있 습 니 다.모두 가 대동 소이 입 니 다.그러면 저 는 자신의 사용 과 결합 하여 글 을 썼 습 니 다.


우선 페이지 모듈 을 새로 만 듭 니 다.

모듈 에 해당 하 는 코드 를 도입 합 니 다.(상세 한 설명 이 있 습 니 다)
template 중

 <div class="page-bar">
 <ul>
  <li class="first">
   <span> {{dataNum}}      {{cur}} / {{all}}  </span>
  </li>
  <li v-if="cur>1">
   <a v-on:click="cur--,pageClick()"><</a>//     
  </li>
  <li v-if="cur==1">
   <a class="banclick"><</a>//        
  </li>
  <li class="li_a" v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
   <a v-on:click="btnClick(index)">{{ index }}</a>//  
  </li>
  <li v-if="cur!=all">
   <a v-on:click="cur++,pageClick()">></a>//     
  </li>
  <li v-if="cur == all">
   <a class="banclick">></a> //         
  </li>
  <li class="last_li">
   <span> <i>{{all}}</i> </span> //      
  </li>
 </ul>
</div>

스타일 의 내용

.page-bar a {
 width: 34px;
 height: 34px;
 border: 1px solid #ddd;
 text-decoration: none;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 /*margin-left: -1px;*/
 line-height: 34px;
 color: #333;
 cursor: pointer
}

.page-bar .li_a a:hover {
 background-color: #eee;
 border: 1px solid #40A9FF;
 color: #40A9FF;
}

.page-bar a.banclick {
 cursor: not-allowed;
}

.page-bar .active a {
 color: #fff;
 cursor: default;
 background-color: #1890FF;
 border-color: #1890FF;
}

.page-bar i {
 font-style: normal;
 color: #d44950;
 margin: 0px 4px;
 font-size: 14px;
}

script

export default {
 //       
 name: "paging",
 //           ，         ，              ！
 props : ["dataAll","dataCur","datanum","dataDatanum"],
 

 data() {
  return {
   all: this.dataAll, //   
   cur: this.dataCur ,//    
   num: this.datanum , //          
   dataNum: this.dataDatanum,//     
   
  }

 },
 watch: {
  cur: function(oldValue, newValue) {
  //     change          
   this.$emit('change', oldValue)
   //           
  }
 },
 methods: {
  btnClick: function(data) { //      
   if(data != this.cur) {
    this.cur = data
   }
  },
  pageClick: function() {
   console.log('   ' + this.cur + ' ');
   //     change          
    //            
   this.$emit('change', this.cur)
  }
 },

 computed: {
  indexs: function() {
   var left = 1;
   var right = this.all;
   var ar = [];
   if(this.all >= this.num ) {
    if(this.cur > 3 && this.cur < this.all - 2) {
     left = this.cur - (this.num-1)/2
     right = this.cur + (this.num-1)/2
    } else {
     if(this.cur <= 3) {
      left = 1
      right = this.num
     } else {
      right = this.all
      left = this.all - (this.num - 1);
     }
    }
   }
   while(left <= right) {
    ar.push(left)
    left++
   }
   return ar
  }

 }

}

상위 구성 요소 내용

<template>
//        ，               
  <div class="page">
  //     props     ，      change   ，            
  <paging :dataAll="all" :dataCur="cur" :datanum="num" :dataDatanum="dataNum" @change="pageChange"></paging>
 </div>
</template>
<style scoped>
 .page {
 width: 100%;
 min-width: 1068px;
 height: 36px;
 margin: 40px auto;
 }
</style>
<script>
import Paging from './paging'
export default {
 name: "homepage",
 components: {
  Paging
 },
 data() {
  return {
   all: 40, //   
   cur: 1, //    
   num: 7, //             
   dataNum: 400, //     
  }
 },
 methods: {
  //              
  pageChange: function(page) {
   this.cur = page
  }
 }
}
</script>

마지막 으로 다시 저장,다시 실행

 npm run dev 

주의 하 다.
자신의 취향 에 따라 스스로 페이지 를 만 들 수 있 습 니 다.저 는 다른 사람의 기초 위 에 페이지 번호 와 현재 페이지 수 를 추 가 했 습 니 다.또한 점프 하 는 페이지 수 를 추가 할 수도 있 고 css 스타일 을 바 꿀 수도 있 습 니 다!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.