chore(vuepress-plugin-pagation): try refactoring using the render func
This commit is contained in:
reco_luan
parent
6c39238b70
commit
2a1cfd5eea
@ -198,7 +198,7 @@ module.exports = {
|
||||
'prefer-const': 2,
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
||||
'object-curly-spacing': [2, 'always', {
|
||||
objectsInObjects: false
|
||||
objectsInObjects: true
|
||||
}],
|
||||
'array-bracket-spacing': [2, 'never']
|
||||
}
|
||||
|
||||
162
packages/@vuepress-reco/vuepress-plugin-pagation/bin/Pagation.js
Normal file
162
packages/@vuepress-reco/vuepress-plugin-pagation/bin/Pagation.js
Normal file
@ -0,0 +1,162 @@
|
||||
import pagationLocales from './locales'
|
||||
import './pagation.styl'
|
||||
|
||||
export default {
|
||||
render (h) {
|
||||
return h('div', {
|
||||
class: { pagation: true },
|
||||
style: { display: this.show ? 'block' : 'none' }
|
||||
}, [
|
||||
h('div', {
|
||||
class: { 'pagation-list': true }
|
||||
}, [
|
||||
h('span', {
|
||||
class: { jump: true },
|
||||
style: { display: this.currentPage > 1 ? 'inline' : 'none' },
|
||||
on: { click: this.goPrev },
|
||||
attrs: { unselectable: 'on' },
|
||||
domProps: { innerHTML: this.pagationLocales.prev }
|
||||
}),
|
||||
h('span', {
|
||||
class: { efont: true },
|
||||
style: { display: this.efont ? 'inline-block' : 'none' },
|
||||
on: { click: this.jumpPage.bind(this, 1) },
|
||||
domProps: { innerHTML: 1 }
|
||||
}),
|
||||
h('span', {
|
||||
class: { efont: true },
|
||||
style: { display: this.efont ? 'inline-block' : 'none' },
|
||||
domProps: { innerHTML: '...' }
|
||||
}),
|
||||
...this.indexs.map(num => {
|
||||
return h('span', {
|
||||
class: {
|
||||
jump: true,
|
||||
bgprimary: this.currentPage == num
|
||||
},
|
||||
on: { click: this.jumpPage.bind(this, num) },
|
||||
attrs: { key: num },
|
||||
domProps: { innerHTML: num }
|
||||
})
|
||||
}),
|
||||
h('span', {
|
||||
class: { ellipsis: true },
|
||||
style: { display: this.efont && this.currentPage < this.pages - 4 ? 'inline-block' : 'none' },
|
||||
domProps: { innerHTML: '...' }
|
||||
}),
|
||||
h('span', {
|
||||
class: { jump: true },
|
||||
style: { display: this.efont && this.currentPage < this.pages - 4 ? 'inline-block' : 'none' },
|
||||
domProps: { innerHTML: this.pages }
|
||||
}),
|
||||
h('span', {
|
||||
class: { jump: true },
|
||||
style: { display: this.currentPage < this.pages ? 'inline' : 'none' },
|
||||
domProps: { innerHTML: this.pagationLocales.next },
|
||||
on: { click: this.goNext }
|
||||
}),
|
||||
h('span', {
|
||||
class: { jumppoint: true },
|
||||
domProps: { innerHTML: this.pagationLocales.jump }
|
||||
}),
|
||||
h('span', {
|
||||
class: { jumpinp: true }
|
||||
}, [h('input', {
|
||||
attrs: { type: 'text' },
|
||||
domProps: { value: this.value },
|
||||
on: { input (event) { this.$emit(event.target.value) } }
|
||||
})]),
|
||||
h('span', {
|
||||
class: { jump: true, gobtn: true },
|
||||
on: { click: this.jumpPage.bind(this, this.changePage) },
|
||||
domProps: { innerHTML: this.pagationLocales.go }
|
||||
})
|
||||
])
|
||||
])
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
changePage: '' // 跳转页
|
||||
}
|
||||
},
|
||||
props: {
|
||||
total: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
perPage: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
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
|
||||
},
|
||||
pagationLocales () {
|
||||
return pagationLocales(this)
|
||||
}
|
||||
},
|
||||
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) {
|
||||
const numId = parseInt(id)
|
||||
|
||||
if (numId <= this.pages && numId > 0) {
|
||||
this.emit(numId)
|
||||
return
|
||||
}
|
||||
alert(`请输入大于0，并且小于${this.pages}的页码！`)
|
||||
},
|
||||
emit (id) {
|
||||
this.$emit('getCurrentPage', id)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
.pagation
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
color: var(--text-color)
|
||||
margin: 20px auto 0;
|
||||
background: #f2f2f2;
|
||||
background: var(--background-color);
|
||||
.pagation-list
|
||||
font-size: 0;
|
||||
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, &.jumpinp input
|
||||
box-shadow: var(--box-shadow)
|
||||
border 1px solid var(--border-color)!important
|
||||
border: 1px solid #ccc;
|
||||
&.jump
|
||||
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;
|
||||
background-color: var(--background-color)
|
||||
font-size: 13px;
|
||||
-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: 0 10px 0 30px;
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
|
||||
]).then(([docsearch]) => {
|
||||
docsearch = docsearch.default
|
||||
const { algoliaOptions = {}} = userOptions
|
||||
const { algoliaOptions = {} } = userOptions
|
||||
docsearch(Object.assign(
|
||||
{},
|
||||
userOptions,
|
||||
|
||||
@ -3,7 +3,7 @@ import { compareDate } from '@theme/helpers/utils'
|
||||
// 过滤博客数据
|
||||
export function filterPosts (posts, isTimeline) {
|
||||
posts = posts.filter((item, index) => {
|
||||
const { title, frontmatter: { home, date, publish }} = item
|
||||
const { title, frontmatter: { home, date, publish } } = item
|
||||
// 过滤多个分类时产生的重复数据
|
||||
if (posts.indexOf(item) !== index) {
|
||||
return false
|
||||
|
||||
Loading…
Reference in New Issue
Block a user