재 활용 가능 한 vue 페이지 구성 요소
<template>
<div class="pages-box" v-if="pageTotal > 0">
<ul class="pages">
<li class="pages-prev">
<a v-if="pageNow != 1" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="prevClick"> </a>
</li>
<!-- , -->
<template v-if="pageTotal > 1">
<li v-for="i in pageBegin" class="pages-li" :class="{active:i == pageNow}">
<span v-if="i == pageNow" v-text="i"></span>
<a v-else href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="pageClick" v-text="i"></a>
</li>
</template>
<li v-if="ellipsis[0] > slider">
<span>...</span>
</li>
<li v-for="i in pageMiddle" class="pages-li" :class="{active:i == pageNow}">
<span v-if="i == pageNow" v-text="i"></span>
<a v-else href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="pageClick" v-text="i"></a>
</li>
<li v-if="pageTotal - ellipsis[1] > slider">
<span>...</span>
</li>
<li v-for="i in pageEnd" class="pages-li" :class="{active:i == pageNow}">
<span v-if="i == pageNow" v-text="i"></span>
<a v-else href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="pageClick" v-text="i"></a>
</li>
<li class="pages-next">
<a v-if="pageNow != pageTotal" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="nextClick"> </a>
</li>
</ul>
</div>
</template>
<script>
export default{
name: 'pages',
props: {
//
total: {
type: [Number, String],
required: true
},
//
now: {
type: [Number, String],
default: 1
}
},
data() {
return {
//
pageNow: this.now,
//
pageTotal: this.total,
//
pageNum: "",
//
length: 8,
//
slider: 1
}
},
watch: {
total(val){
let page_total = parseInt(val);
page_total = (isNaN(page_total) || page_total < 1) ? 1 : page_total;
this.pageTotal = page_total;
},
now(val){
let page_now = parseInt(val);
page_now = (isNaN(page_now) || this.pageTotal < 2 || page_now < 1) ? 1 : page_now;
page_now = page_now > this.pageTotal ? this.pageTotal : page_now;
this.pageNow = page_now;
}
},
computed: {
//
pageBegin(){
return Math.min(this.slider, this.ellipsis[0]);
},
//
pageMiddle(){
let arr = [];
for (let i = this.ellipsis[0] + 1; i <= this.ellipsis[1]; i++) {
arr.push(i);
}
return arr;
},
//
pageEnd(){
let arr = [];
for (let i = this.ellipsis[2] + 1; i <= this.pageTotal; i++) {
arr.push(i);
}
return arr;
},
/**
*
* @returns {*[]}
* begin:
* end:
* end_max:
*/
ellipsis() {
let end_max = this.pageTotal - this.slider;
let begin = this.pageNow - (this.length / 2) + this.slider;
begin = begin < 1 ? 1 : begin;
let end = begin + this.length - 2 * this.slider;
// begin begin end
end = begin < this.slider ? (end + this.slider - begin) : end;
if (end >= end_max) {
end = end_max;
// end end begin
begin = (end - this.length + 2 * this.slider) < 1 ? 1 : (end - this.length + 2 * this.slider);
}
return [begin, end, end_max];
}
},
methods: {
//
prevClick() {
this.pageNow--;
this.pageNow = this.pageNow < 1 ? 1 : this.pageNow;
this.changePage(this.pageNow);
},
//
nextClick() {
this.pageNow++;
this.pageNow = this.pageNow > this.pageTotal ? this.pageTotal : this.pageNow;
this.changePage(this.pageNow);
},
//
pageClick(e) {
this.pageNow = Number(e.target.innerText.trim());
this.changePage(this.pageNow);
},
//
pageInput(e){
let num = parseInt(e.target.innerText);
if(isNaN(num)){
this.pageNum = '';
e.target.innerText = '';
} else {
this.pageNum = num;
//e.target.innerText = num;
}
},
//
goClick() {
this.pageNum = this.pageNum < 1 ? 1 : this.pageNum;
this.pageNum = this.pageNum > this.pageTotal ? this.pageTotal : this.pageNum;
this.pageNow = this.pageNum;
this.pageNum = "";
this.changePage(this.pageNow);
},
//
changePage(page){
let {name, params, query} = this.$route;
this.$router.push({
name,
params: Object.assign(params, {page}),
query
});
}
}
}
</script>
<style lang="sass" type="text/scss" rel="stylesheet/scss">
@import '../scss/base/variables';
.pages-box{
position: relative;
padding: 5px 10px;
margin: 20px 0;
text-align: center;
}
.pages{
display: inline-block;
padding: 10px 0;
&:after{
content: "";
display: table;
line-height: 0;
clear: both;
}
li{
float: left;
height: 20px;
line-height: 20px;
text-align: center;
margin: 0 2px;
box-sizing: border-box;
font-size: 13px;
span, a{
display: block;
width: 100%;
height: 100%;
padding: 0 2px;
box-sizing: border-box;
}
}
.pages-li{
min-width: 30px;
border: 1px solid $theme;
color: $theme;
a{
color: $theme;
}
&.active{
span{
background: $theme;
color: #fff;
}
}
}
.pages-prev, .pages-next{
padding: 0 8px;
font-size: 12px;
a{
display: block;
height: 100%;
position: relative;
color: $theme;
&:before{
content: '';
position: absolute;
top: 50%;
display: block;
width: 6px;
height: 6px;margin-top:-4px;
border-left: 1px solid $theme;
border-top: 1px solid $theme;
}
}
}
.pages-prev a{
padding-left: 8px;
&:before{
transform:rotate(-45deg);
left: 0;
}
}
.pages-next a{
padding-right: 8px;
&:before{
transform:rotate(135deg);
right: 0;
}
}
.pages-num{
.num-input{
min-width: 20px;
height: 20px;
padding: 0 5px;
line-height: 20px;
border-radius: 2px;
border: 1px solid $theme;
color: $theme;
text-align: center;
outline: none;
}
}
.pages-go{
a{
color: $theme;
}
span{
color: #666;
}
}
}
</style>
사용 방법:페이지 가 필요 한 곳 에 페이지 구성 요소 탭 을 사용 합 니 다.예 를 들 어 여기 order.vue:
<!-- -->
<pages :now="page" :total="totalPage" v-if="totalPage > 0"></pages>
data 에 현재 페이지 와 전체 페이지 의 기본 값 을 설정 합 니 다.
data(){
return {
totalPage:1,
page:1,
}
},
저희 가 페이지 버튼 을 누 르 면 무슨 일이 일 어 났 으 면 좋 겠 는 지 생각해 보 세 요.우선,어떤 페이지 를 클릭 하면 경로 가 페이지 수 를 바 꾸 고 경로 에서 현재 페이지 를 가 져 옵 니 다.
this.page = this.$route.params.page;
이 어 현재 페이지 수 를 서버 에 보 내 고 돌아 오 는 데 이 터 를 페이지 에 업데이트 하 는 getorderfrom Server 방법 이 있 기 를 바 랍 니 다.
getorderfromServer({
currentPage:this.page
})
마지막 호출 방법:
methods: {
//
getorderfromServer(){
this.loading = true;
this.page = this.$route.params.page;
getorderfromServer({
currentPage: this.page,
orderTimeStart:this.orderTimeStart,
orderTimeEnd:this.orderTimeEnd,
serviceName:this.serviceName,
shopName:this.shopName,
status: this.status
}).then(({code, data}) => {
if (code == 200) {
this.Orderlist = data.list;
this.totalPage = data.totalPage;
}
this.loading = false;
}).catch(err => {
this.tip(' ', 'error');
this.Orderlist = {};
this.loading = false;
});
},
}
경로 가 바 뀔 때마다 이 방법 을 사용 하여 페이지 를 업데이트 합 니 다.
watch: {
$route: 'getorderfromServer'
}
또한 경로 정 보 를 개조 하여 모든 페이지(특히 첫 페이지)에 경로 정보 가 있 고 첫 페이지 에 대해 방향 을 바 꾸 어 목적 을 달성 할 수 있 도록 해 야 한다.
{
path: 'order',
redirect: 'order/page/1',
},
{
path: 'order/page/:page',
component(resolve){
require.ensure([], function (require) {
resolve(require('../modules/personal/order/myorder.vue'));
}, 'modules/personal')
},
name:'order',
meta: {
login: 'none'
}
},
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.