style: pkg cmpt(BackToTop/Pagation/Screenfull)
This commit is contained in:
reco_luan
parent
b1d4154ec3
commit
52d16e1708
@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<transition :name="transitionName">
|
||||
<div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
|
||||
<i class="iconfont reco-up"></i>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BackToTop',
|
||||
props: {
|
||||
visibilityHeight: {
|
||||
type: Number,
|
||||
default: 400
|
||||
},
|
||||
backPosition: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
right: '1rem',
|
||||
bottom: '6rem',
|
||||
width: '2.5rem',
|
||||
height: '2.5rem',
|
||||
'border-radius': '.25rem',
|
||||
'line-height': '2.5rem',
|
||||
backgroundColor: 'rgba(231, 234, 241,.5)'
|
||||
}
|
||||
}
|
||||
},
|
||||
transitionName: {
|
||||
type: String,
|
||||
default: 'fade'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
interval: null,
|
||||
isMoving: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
if (this.interval) {
|
||||
clearInterval(this.interval)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleScroll () {
|
||||
this.visible = window.pageYOffset > this.visibilityHeight
|
||||
},
|
||||
backToTop () {
|
||||
if (this.isMoving) return
|
||||
const start = window.pageYOffset
|
||||
let i = 0
|
||||
this.isMoving = true
|
||||
this.interval = setInterval(() => {
|
||||
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
|
||||
if (next <= this.backPosition) {
|
||||
window.scrollTo(0, this.backPosition)
|
||||
clearInterval(this.interval)
|
||||
this.isMoving = false
|
||||
} else {
|
||||
window.scrollTo(0, next)
|
||||
}
|
||||
i++
|
||||
}, 16.7)
|
||||
},
|
||||
easeInOutQuad (t, b, c, d) {
|
||||
if ((t /= d / 2) < 1) return c / 2 * t * t + b
|
||||
return -c / 2 * (--t * (t - 2) - 1) + b
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.back-to-ceiling
|
||||
position: fixed;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
i
|
||||
font-size 1.6rem
|
||||
color $accentColor
|
||||
.back-to-ceiling:hover {
|
||||
background: #d5dbe7;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0
|
||||
transform translateY(120px)
|
||||
}
|
||||
.back-to-ceiling .Icon {
|
||||
fill: #9aaabf;
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
@ -32,8 +32,6 @@
|
||||
<slot></slot>
|
||||
<Valine :isComment="isComment"></Valine>
|
||||
</div>
|
||||
|
||||
<BackToTop></BackToTop>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
@ -46,11 +44,10 @@ import { resolveSidebarItems } from '../util'
|
||||
import Password from '@theme/components/Password'
|
||||
import Loading from '@theme/components/Loading'
|
||||
import Valine from '@theme/components/Valine/'
|
||||
import BackToTop from '@theme/components/BackToTop'
|
||||
import { setTimeout } from 'timers'
|
||||
|
||||
export default {
|
||||
components: { Sidebar, Navbar, Password, Valine, BackToTop, Loading },
|
||||
components: { Sidebar, Navbar, Password, Valine, Loading },
|
||||
|
||||
props: ['sidebar', 'isComment'],
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
} : {}">
|
||||
|
||||
<Theme v-if="hasThemes" />
|
||||
<ScreenFull />
|
||||
<Screenfull class="screenfull" />
|
||||
<AlgoliaSearchBox
|
||||
v-if="isAlgoliaSearch"
|
||||
:options="algolia"/>
|
||||
@ -39,10 +39,9 @@ import SearchBox from '@SearchBox'
|
||||
import SidebarButton from '@theme/components/SidebarButton.vue'
|
||||
import NavLinks from '@theme/components/NavLinks.vue'
|
||||
import Theme from '@theme/components/Theme'
|
||||
import ScreenFull from '@theme/components/ScreenFull'
|
||||
|
||||
export default {
|
||||
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox, Theme, ScreenFull },
|
||||
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox, Theme },
|
||||
|
||||
data () {
|
||||
return {
|
||||
@ -120,6 +119,8 @@ $navbar-horizontal-padding = 1.5rem
|
||||
.search-box
|
||||
flex: 0 0 auto
|
||||
vertical-align top
|
||||
.screenfull
|
||||
margin-right 1rem
|
||||
|
||||
@media (max-width: $MQMobile)
|
||||
.navbar
|
||||
|
||||
@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<div class="pagation" v-show="show">
|
||||
<div class="pagation-list">
|
||||
<span class="jump" v-show="currentPage>1" @click="goPrev" unselectable="on">Prev</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&¤tPage<pages-4">...</span>
|
||||
<span v-show="efont&¤tPage<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
|
||||
<span class="jump" v-show="currentPage < pages" @click="goNext">Next</span>
|
||||
<span class="jumppoint">跳转到：</span>
|
||||
<span class="jumpinp"><input type="text" v-model="changePage"></span>
|
||||
<span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
changePage: '' // 跳转页
|
||||
}
|
||||
},
|
||||
props: {
|
||||
total: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
perPage: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pages () {
|
||||
return Math.ceil(this.total / this.perPage)
|
||||
},
|
||||
show: function () {
|
||||
return this.pages && this.pages != 1
|
||||
},
|
||||
efont: function () {
|
||||
if (this.pages <= 7) return false
|
||||
return this.currentPage > 5
|
||||
},
|
||||
indexs: function () {
|
||||
var left = 1
|
||||
var right = this.pages
|
||||
var ar = []
|
||||
if (this.pages >= 7) {
|
||||
if (this.currentPage > 5 && this.currentPage < this.pages - 4) {
|
||||
left = Number(this.currentPage) - 3
|
||||
right = Number(this.currentPage) + 3
|
||||
} else {
|
||||
if (this.currentPage <= 5) {
|
||||
left = 1
|
||||
right = 7
|
||||
} else {
|
||||
right = this.pages
|
||||
|
||||
left = this.pages - 6
|
||||
}
|
||||
}
|
||||
}
|
||||
while (left <= right) {
|
||||
ar.push(left)
|
||||
left++
|
||||
}
|
||||
return ar
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goPrev () {
|
||||
let currentPage = this.currentPage
|
||||
if (this.currentPage > 1) {
|
||||
this.emit(--currentPage)
|
||||
}
|
||||
},
|
||||
goNext () {
|
||||
let currentPage = this.currentPage
|
||||
if (currentPage < this.pages) {
|
||||
this.emit(++currentPage)
|
||||
}
|
||||
},
|
||||
jumpPage: function (id) {
|
||||
if (id == '') {
|
||||
alert(`请输入页码！`)
|
||||
return
|
||||
}
|
||||
if (id <= this.pages) {
|
||||
this.emit(id)
|
||||
return
|
||||
}
|
||||
alert(`请输入小于${this.pages}的页码！`)
|
||||
},
|
||||
emit (id) {
|
||||
this.$emit('getCurrentPage', id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
.pagation
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
margin: 20px auto 0;
|
||||
background: #f2f2f2;
|
||||
.pagation-list
|
||||
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
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px 8px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
&.jumpinp
|
||||
input
|
||||
width: 55px;
|
||||
height: 26px;
|
||||
font-size: 13px;
|
||||
border: 1px solid #ccc;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
outline none
|
||||
&.bgprimary
|
||||
cursor: default;
|
||||
color: #fff;
|
||||
background: $accentColor;
|
||||
border-color: $accentColor;
|
||||
&.ellipsis
|
||||
padding: 0px 8px;
|
||||
&.jumppoint
|
||||
margin-left: 30px;
|
||||
</style>
|
||||
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="fullscreen-wrapper">
|
||||
<i class="iconfont reco-fullscreen" @click="click"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import screenfull from 'screenfull'
|
||||
export default {
|
||||
name: 'Screenfull',
|
||||
data () {
|
||||
return {
|
||||
isFullscreen: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.destroy()
|
||||
},
|
||||
methods: {
|
||||
click () {
|
||||
if (!screenfull.enabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
screenfull.toggle()
|
||||
},
|
||||
change () {
|
||||
this.isFullscreen = screenfull.isFullscreen
|
||||
},
|
||||
init () {
|
||||
if (screenfull.enabled) {
|
||||
screenfull.on('change', this.change)
|
||||
}
|
||||
},
|
||||
destroy () {
|
||||
if (screenfull.enabled) {
|
||||
screenfull.off('change', this.change)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.fullscreen-wrapper {
|
||||
margin-right: 1em;
|
||||
.iconfont {
|
||||
font-size 1.4rem
|
||||
color: $accentColor
|
||||
}
|
||||
}
|
||||
</style>
|
||||
3
index.js
3
index.js
@ -18,6 +18,9 @@ module.exports = (options, ctx) => ({
|
||||
},
|
||||
|
||||
plugins: [
|
||||
'@vuepress-reco/vuepress-plugin-back-to-top',
|
||||
'@vuepress-reco/vuepress-plugin-pagation',
|
||||
'@vuepress-reco/vuepress-plugin-screenfull',
|
||||
'@vuepress/active-header-links',
|
||||
['@vuepress/plugin-blog', {
|
||||
permalink: '/:regular'
|
||||
|
||||
@ -36,10 +36,9 @@
|
||||
<script>
|
||||
import Common from '@theme/components/Common.vue'
|
||||
import NoteAbstract from '@theme/components/NoteAbstract.vue'
|
||||
import Pagation from '@theme/components/Pagation.vue'
|
||||
|
||||
export default {
|
||||
components: { Common, NoteAbstract, Pagation },
|
||||
components: { Common, NoteAbstract },
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -27,12 +27,11 @@
|
||||
<script>
|
||||
import Common from '@theme/components/Common.vue'
|
||||
import NoteAbstract from '@theme/components/NoteAbstract.vue'
|
||||
import Pagation from '@theme/components/Pagation.vue'
|
||||
import mixin from '@theme/mixins/index.js'
|
||||
|
||||
export default {
|
||||
mixins: [mixin],
|
||||
components: { Common, NoteAbstract, Pagation },
|
||||
components: { Common, NoteAbstract },
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vuepress-theme-reco",
|
||||
"version": "1.0.8-alpha.5",
|
||||
"version": "1.0.9-alpha.3",
|
||||
"description": "this is a vuepress theme",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
@ -26,9 +26,11 @@
|
||||
"_from": "vuepress-theme-reco@0.2.1",
|
||||
"_resolved": "http://registry.npm.taobao.org/vuepress-theme-reco/download/vuepress-theme-reco-0.2.1.tgz",
|
||||
"dependencies": {
|
||||
"@vuepress-reco/vuepress-plugin-back-to-top": "^1.0.3",
|
||||
"@vuepress-reco/vuepress-plugin-pagation": "^1.0.3",
|
||||
"@vuepress-reco/vuepress-plugin-screenfull": "^1.0.0",
|
||||
"@vuepress/plugin-blog": "1.0.0-alpha.49",
|
||||
"leancloud-storage": "3.13.2",
|
||||
"screenfull": "4.2.1",
|
||||
"valine": "1.3.6",
|
||||
"vue-click-outside": "1.0.7"
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user