Skip to content
Permalink
Browse files

分页优化,手机端适配优化,标题过长优化,标签页初始化优化

  • Loading branch information
kangxu
kangxu committed Jan 23, 2019
1 parent 40f880f commit ec7426a88d50cf8d9f90a7ad9b731a10da7f438b
@@ -70,9 +70,9 @@ export default {
@require '../../styles/wrapper.styl'
.categories-wrapper
max-width: 740px;
margin: 0 auto;
padding: 0 2.5rem;
padding: 0rem 1.5rem 0 !important;
max-width: 960px;
margin: 0px auto;
@media (max-width: $MQMobile)
.categories-wrapper
@@ -73,7 +73,8 @@ export default {
// 使用ref会间断性获取不到dom
const navbarWrapper = document.querySelector('#navbarWrapper')
const height = navbarWrapper.offsetHeight == 58 ? 58 : 58
// const height = navbarWrapper.offsetHeight == 58 ? 58 : 58
const height = navbarWrapper.offsetHeight == 0 ? 0 : 0
const transformHeight = scrollDirection == 'up' ? height : 0
if (oldTransformHeight != transformHeight) {
@@ -3,67 +3,77 @@
<div
v-for="(item, index) in data"
:key="index"
v-show="((index + 1) > (currentPage - 1) * 10) && ((index + 1) <= currentPage * 10)"
class="abstract-item">
v-if="((index + 1) > (currentPage - 1) * 10) && ((index + 1) <= currentPage * 10)"
class="abstract-item"
>
<div class="title">
<router-link
:to="item.path">{{item.title}}</router-link>
<router-link class="abstract-item-title" :title="item.title" :to="item.path">{{item.title}}</router-link>
<div class="abstract-item-author-time">
<span class="abstract-item-time">{{item.frontmatter.time?item.frontmatter.time:""}}</span>
<span class="abstract-item-author">{{item.frontmatter.author?item.frontmatter.author:""}}</span>
</div>
</div>
<div class="abstract" v-html="item.excerpt"></div>
<hr>
<div class="tags">
<span
<span
v-for="(subItem, subIndex) in item.frontmatter.tags"
:key="subIndex"
class="tag-item"
@click="goTags(subItem)">
{{subItem}}
</span>
@click="goTags(subItem)"
>{{subItem}}</span>
</div>
</div>
</div>
</template>

<script>
export default {
props: ['data', 'currentPage'],
props: ["data", "currentPage"],
methods: {
goTags (tag) {
const tagClick = this.$site.themeConfig.tagClick
this.$emit('currentTag', tag)
goTags(tag) {
const tagClick = this.$site.themeConfig.tagClick;
this.$emit("currentTag", tag);
if (tagClick == true) {
// 目前通过name跳转会报错
this.$router.push({path: '/tags/'})
this.$router.push({ path: "/tags/" });
}
}
}
}
};
</script>

<style lang="stylus" scoped>
@import '../../styles/config.styl'
@import '../../styles/config.styl';
.abstract-wrapper
width 100%
.abstract-item
.abstract-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: stretch;
justify-content: space-between;
.abstract-item {
margin: 0 auto 20px;
padding: 16px 20px;
width 100%
width: 100%;
overflow: hidden;
border-radius: 2px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
transition all .3s
background-color #fff
&:hover
transition: all 0.3s;
background-color: #fff;
&:hover {
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
.title
}
.title {
position: relative;
font-size: 1.28rem;
line-height: 36px;
display: inline-block;
:after
content: "";
:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
@@ -73,24 +83,64 @@ export default {
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
transition: .3s ease-in-out;
:hover:after
visibility visible
transition: 0.3s ease-in-out;
}
:hover:after {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
.tags
.tag-item
transition: all .3s
}
.abstract-item-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.abstract-item-author-time {
display: inline-block;
font-size: .5rem;
color: #999;
float: right;
width: 50%;
vertical-align: middle;
.abstract-item-time {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
width: 50%;
float: right;
text-align: right;
vertical-align: middle;
}
.abstract-item-author {
width: 50%;
float: right;
text-align: right;
}
}
}
.tags {
.tag-item {
transition: all 0.3s;
vertical-align: middle;
margin: 4px;
padding 4px 8px
padding: 4px 8px;
display: inline-flex;
cursor: pointer;
border-radius: 2px;
background: #fff;
color: #999;
font-size: 13px;
box-shadow 0 1px 5px 0 rgba(0,0,0,0.2)
&:hover
transform scale(1.05)
font-size: 13px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
&:hover {
transform: scale(1.05);
}
}
}
}
}
</style>
@@ -1,17 +1,17 @@
<template>
<div class="pagation" v-show="show">
<div class="pagation-list">
<span class="jump" v-show="currentPage>1" @click="goPrev">上一页</span>
<span v-show="currentPage>5" class="jump" @click="jumpPage(1)">1</span>
<div class="pagation" v-if="show">
<div class="pagation-list" unselectable="on">
<span class="jump" v-show="currentPage>1" @click="jumpPage(currentPage-1)">上一页</span>
<span v-show="efont" class="jump" @click="jumpPage(1)">1</span>
<span class="ellipsis" v-show="efont">...</span>
<span class="jump" v-for="num in indexs" :key="num" :class="{bgprimary:currentPage==num}" @click="jumpPage(num)">{{num}}</span>
<span class="ellipsis" v-show="efont&&currentPage<pages-4">...</span>

<span class="jump" v-show="currentPage < pages" @click="goNext">下一页</span>
<span v-show="efont&&currentPage<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
<span class="jump" v-show="currentPage < pages" @click="jumpPage(currentPage+1)">下一页</span>

<span class="jumppoint">跳转到:</span>
<span class="jumpinp"><input type="text" v-model="changePage"></span>
<span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
<span class="jumpinp"><input type="text" v-model="changePage" @keyup.enter.native="jumpPage(changePage)"></span>
<span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
</div>
</div>
</template>
@@ -78,22 +78,38 @@ export default {
},
methods: {
goPrev () {
alert(this.currentPage)
if (this.currentPage > 1) {
const currentPage = this.currentPage
this.emit(currentPage--)
let currentPage = this.currentPage;
--currentPage;
alert(currentPage)
this.emit(currentPage);
return;
}
},
goNext () {
alert(this.currentPage)
alert(this.pages)
if (this.currentPage < this.pages) {
const currentPage = this.currentPage
this.emit(currentPage++)
let currentPage = this.currentPage;
++currentPage;
alert(currentPage)
this.emit(currentPage);
return;
}
},
jumpPage: function(id) {
if (id <= this.pages) {
this.emit(id)
return
}
if(!id){
alert(`请输入页码!`)
return
}
alert(`请输入小于${this.pages}的页码!`)
},
emit (id) {
@@ -116,6 +132,12 @@ export default {
font-size: 0;
background: #fff;
line-height: 50px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
span
font-size: 14px;
&.jump
@@ -15,6 +15,7 @@

<pagation
:data="pages"
:currentPage="currentPage"
@getCurrentPage="getCurrentPage"></pagation>
</div>
</template>
@@ -78,6 +79,7 @@ export default {
})
// reverse()是为了按时间最近排序排序
this.pages = pages.length == 0 ? [] : pages.reverse()
this.getCurrentPage(1);
},
getCurrentPage (page) {
this.currentPage = page
@@ -104,9 +106,9 @@ export default {
@require '../../styles/wrapper.styl'
.tags-wrapper
max-width: 740px;
margin: 0 auto;
padding: 0 2.5rem;
padding: 0rem 1.5rem 0 !important;
max-width: 960px;
margin: 0px auto;
.tags
margin-bottom 30px
span
@@ -34,7 +34,7 @@ export default {

<style lang="stylus" scoped>
#valine
max-width: 740px;
max-width: 50%;
margin: 0 auto;
padding: 0 2.5rem;
background-color #fff
@@ -103,7 +103,7 @@ export default {
},
prev () {
const prev = this.$page.frontmatter.prev
let prev = this.$page.frontmatter.prev
if (prev === false) {
return
} else if (prev) {
@@ -114,7 +114,7 @@ export default {
},
next () {
const next = this.$page.frontmatter.next
let next = this.$page.frontmatter.next
if (next === false) {
return
} else if (next) {
@@ -8,7 +8,7 @@ $arrowBgColor = #ccc
// layout
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$contentWidth = 50%

// responsive breakpoints
$MQNarrow = 959px
@@ -58,7 +58,9 @@ body
overflow-y auto

.content:not(.custom)
@extend $wrapper
padding: 2rem 2rem 0;
max-width: 960px;
margin: 0px auto;
> *:first-child
margin-top $navbarHeight
a:hover

0 comments on commit ec7426a

Please sign in to comment.
You can’t perform that action at this time.