From 2a1cfd5eea622725c32eede2b6ced76a7fbe5181 Mon Sep 17 00:00:00 2001 From: reco_luan Date: Sat, 20 Jun 2020 23:29:19 +0800 Subject: [PATCH] chore(vuepress-plugin-pagation): try refactoring using the render func --- .eslintrc.js | 2 +- .../vuepress-plugin-pagation/bin/Pagation.js | 162 ++++++++++++++++++ .../bin/enhanceAppFile.js | 2 +- .../bin/pagation.styl | 50 ++++++ .../components/AlgoliaSearchBox.vue | 2 +- .../vuepress-theme-reco/helpers/postData.js | 2 +- 6 files changed, 216 insertions(+), 4 deletions(-) create mode 100644 packages/@vuepress-reco/vuepress-plugin-pagation/bin/Pagation.js create mode 100644 packages/@vuepress-reco/vuepress-plugin-pagation/bin/pagation.styl diff --git a/.eslintrc.js b/.eslintrc.js index e5ed7e6..c07fc20 100755 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -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'] } diff --git a/packages/@vuepress-reco/vuepress-plugin-pagation/bin/Pagation.js b/packages/@vuepress-reco/vuepress-plugin-pagation/bin/Pagation.js new file mode 100644 index 0000000..8c4baca --- /dev/null +++ b/packages/@vuepress-reco/vuepress-plugin-pagation/bin/Pagation.js @@ -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) + } + } +} diff --git a/packages/@vuepress-reco/vuepress-plugin-pagation/bin/enhanceAppFile.js b/packages/@vuepress-reco/vuepress-plugin-pagation/bin/enhanceAppFile.js index 136fff7..10718d8 100644 --- a/packages/@vuepress-reco/vuepress-plugin-pagation/bin/enhanceAppFile.js +++ b/packages/@vuepress-reco/vuepress-plugin-pagation/bin/enhanceAppFile.js @@ -2,4 +2,4 @@ import Pagation from './Pagation.vue' export default ({ Vue }) => { Vue.component('Pagation', Pagation) -} \ No newline at end of file +} diff --git a/packages/@vuepress-reco/vuepress-plugin-pagation/bin/pagation.styl b/packages/@vuepress-reco/vuepress-plugin-pagation/bin/pagation.styl new file mode 100644 index 0000000..589fdb3 --- /dev/null +++ b/packages/@vuepress-reco/vuepress-plugin-pagation/bin/pagation.styl @@ -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; diff --git a/packages/vuepress-theme-reco/components/AlgoliaSearchBox.vue b/packages/vuepress-theme-reco/components/AlgoliaSearchBox.vue index 5add000..1be5450 100644 --- a/packages/vuepress-theme-reco/components/AlgoliaSearchBox.vue +++ b/packages/vuepress-theme-reco/components/AlgoliaSearchBox.vue @@ -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, diff --git a/packages/vuepress-theme-reco/helpers/postData.js b/packages/vuepress-theme-reco/helpers/postData.js index 95748e2..13c3f35 100644 --- a/packages/vuepress-theme-reco/helpers/postData.js +++ b/packages/vuepress-theme-reco/helpers/postData.js @@ -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