Vue.js에서 페이지 스타일 만들기
18633 단어 Vue.js
개시하다
이번에는 라벨과 뷰 등을 공부할 때 많이 참고하는 이 사이트입니다.'Vue+Vue Router+Vuex+Laravel로 사진 공유 앱 만들기'를 통해 vue 형식으로 페이지를 만들었고, 이 사이트에서 사용하는 페이지는previous와next로 구성되어 있다.
previous,next, 페이지 수를 원해서 했습니다https://www.hypertextcandy.com/tags/vuejs
완성도는 위에서 말한 바와 같다.
라벨의 구조와 디자인은 laravel 표준 중의 것을 재현했다!
Pagination.vue
<template>
<div class="links">
<ul class="pagination">
<!-- Previous Page Link -->
<li class="page-item disabled" v-if="isFirstPage">
<span class="page-link">‹</span>
</li>
<li class="page-item" v-if="!isFirstPage">
<RouterLink :to="`?page=${currentPage - 1}`" class="page-link">‹</RouterLink>
</li>
<!-- Pagination Elements -->
<li
class="page-item"
:class="{active: currentPage == page}"
v-for="page in displayList"
:key="page"
>
<router-link class="page-link" :to="`?page=${page}`" v-if="currentPage != page">{{page}}</router-link>
<span class="page-link" v-if="currentPage == page">
{{
page }}
</span>
</li>
<!-- Next Page Link -->
<li class="page-item" v-if="!isLastPage">
<RouterLink :to="`?page=${currentPage + 1}`" class="page-link">›</RouterLink>
</li>
<li class="page-item disabled" v-if="isLastPage">
<span class="page-link">›</span>
</li>
<!-- <RouterLink v-if="! isFirstPage" :to="`?page=${currentPage - 1}`" class="button">« prev</RouterLink>
<RouterLink v-if="! isLastPage" :to="`?page=${currentPage + 1}`" class="button">next »</RouterLink>-->
</ul>
</div>
</template>
Pagination.vue<script>
export default {
props: {
currentPage: {
type: Number,
required: true
},
lastPage: {
type: Number,
required: true
}
},
data() {
return {};
},
computed: {
isFirstPage() {
return this.currentPage === 1;
},
isLastPage() {
return this.currentPage === this.lastPage;
},
displayList() {
//4は選択しているページの前後のページリスト表示数です。
let first = this.currentPage - 4;
if (first < 1) first = 1;
let last = this.currentPage + 4;
if (last > this.lastPage) last = this.lastPage;
const list = [];
for (let i = first; i <= last; i++) {
list.push(i);
}
return list;
}
}
};
</script>
나는 for문을 사용하는 곳을 더욱 아름답게 쓰고 싶다.
pagination.scss.links {
display: flex;
justify-content: center;
.pagination {
list-style-type: none;
display: flex;
padding: 0;
.page-item {
width: 33px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #dee2e6;
background-color: #fff;
&:first-child {
width: 30px;
border-radius: 5px 0 0 5px;
}
&:last-child {
width: 30px;
border-radius: 0 5px 5px 0;
}
.page-link {
text-decoration: none;
padding: 5.5px 11px;
color: rgba(29, 161, 242, 1);
}
}
.disabled {
.page-link {
color: #6c757d;
}
}
.active {
background-color: rgba(29, 161, 242, 1);
.page-link {
color: #dee2e6;
}
}
}
}
pagination.css.links {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.links .pagination {
list-style-type: none;
display: -webkit-box;
display: flex;
padding: 0;
}
.links .pagination .page-item {
width: 33px;
height: 35px;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
border: 1px solid #dee2e6;
background-color: #fff;
}
.links .pagination .page-item:first-child {
width: 30px;
border-radius: 5px 0 0 5px;
}
.links .pagination .page-item:last-child {
width: 30px;
border-radius: 0 5px 5px 0;
}
.links .pagination .page-item .page-link {
text-decoration: none;
padding: 5.5px 11px;
color: #1da1f2;
}
.links .pagination .disabled .page-link {
color: #6c757d;
}
.links .pagination .active {
background-color: #1da1f2;
}
.links .pagination .active .page-link {
color: #dee2e6;
}
적당히 변경해주세요~
인용
Vue+Vue Router+Vuex+Laavel로 사진 공유 앱 만들어주세요.
Reference
이 문제에 관하여(Vue.js에서 페이지 스타일 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/okamura89/items/b7644363a6f94195d6ea
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<template>
<div class="links">
<ul class="pagination">
<!-- Previous Page Link -->
<li class="page-item disabled" v-if="isFirstPage">
<span class="page-link">‹</span>
</li>
<li class="page-item" v-if="!isFirstPage">
<RouterLink :to="`?page=${currentPage - 1}`" class="page-link">‹</RouterLink>
</li>
<!-- Pagination Elements -->
<li
class="page-item"
:class="{active: currentPage == page}"
v-for="page in displayList"
:key="page"
>
<router-link class="page-link" :to="`?page=${page}`" v-if="currentPage != page">{{page}}</router-link>
<span class="page-link" v-if="currentPage == page">
{{
page }}
</span>
</li>
<!-- Next Page Link -->
<li class="page-item" v-if="!isLastPage">
<RouterLink :to="`?page=${currentPage + 1}`" class="page-link">›</RouterLink>
</li>
<li class="page-item disabled" v-if="isLastPage">
<span class="page-link">›</span>
</li>
<!-- <RouterLink v-if="! isFirstPage" :to="`?page=${currentPage - 1}`" class="button">« prev</RouterLink>
<RouterLink v-if="! isLastPage" :to="`?page=${currentPage + 1}`" class="button">next »</RouterLink>-->
</ul>
</div>
</template>
<script>
export default {
props: {
currentPage: {
type: Number,
required: true
},
lastPage: {
type: Number,
required: true
}
},
data() {
return {};
},
computed: {
isFirstPage() {
return this.currentPage === 1;
},
isLastPage() {
return this.currentPage === this.lastPage;
},
displayList() {
//4は選択しているページの前後のページリスト表示数です。
let first = this.currentPage - 4;
if (first < 1) first = 1;
let last = this.currentPage + 4;
if (last > this.lastPage) last = this.lastPage;
const list = [];
for (let i = first; i <= last; i++) {
list.push(i);
}
return list;
}
}
};
</script>
.links {
display: flex;
justify-content: center;
.pagination {
list-style-type: none;
display: flex;
padding: 0;
.page-item {
width: 33px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #dee2e6;
background-color: #fff;
&:first-child {
width: 30px;
border-radius: 5px 0 0 5px;
}
&:last-child {
width: 30px;
border-radius: 0 5px 5px 0;
}
.page-link {
text-decoration: none;
padding: 5.5px 11px;
color: rgba(29, 161, 242, 1);
}
}
.disabled {
.page-link {
color: #6c757d;
}
}
.active {
background-color: rgba(29, 161, 242, 1);
.page-link {
color: #dee2e6;
}
}
}
}
.links {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.links .pagination {
list-style-type: none;
display: -webkit-box;
display: flex;
padding: 0;
}
.links .pagination .page-item {
width: 33px;
height: 35px;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
border: 1px solid #dee2e6;
background-color: #fff;
}
.links .pagination .page-item:first-child {
width: 30px;
border-radius: 5px 0 0 5px;
}
.links .pagination .page-item:last-child {
width: 30px;
border-radius: 0 5px 5px 0;
}
.links .pagination .page-item .page-link {
text-decoration: none;
padding: 5.5px 11px;
color: #1da1f2;
}
.links .pagination .disabled .page-link {
color: #6c757d;
}
.links .pagination .active {
background-color: #1da1f2;
}
.links .pagination .active .page-link {
color: #dee2e6;
}
Reference
이 문제에 관하여(Vue.js에서 페이지 스타일 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/okamura89/items/b7644363a6f94195d6ea텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)