diff --git a/src/pager/index.js b/src/pager/index.js index b3b9182..e986279 100644 --- a/src/pager/index.js +++ b/src/pager/index.js @@ -4,14 +4,12 @@ * @date 2023/04/18 09:38:01 */ -import { css, html, Component, bind, styleMap } from 'wkit' +import { css, html, Component } from 'wkit' import '../form/button.js' const LAYOUT_DICT = { home: e => html``, end: e => html``, prev: e => html``, next: e => html` Go to - + ` } } // 计算页码 function calculate(curr, total) { - var arr = [] - var fixed = 0 - var half = curr < 3 ? 6 - curr : 2 // 中间页码 + let arr = [] + let fixed = 0 + let half = curr < 3 ? 6 - curr : 2 // 中间页码 // 总页码小于2 if (total < 2) { @@ -68,7 +60,7 @@ function calculate(curr, total) { // 当前页面比半数多时, 前面的用省略号代替 if (curr - half > 1 && total > 5) { - var to = curr - 2 * half + let to = curr - 2 * half to = to < 1 ? 1 : to arr.push({ to, txt: '...' }) } @@ -78,7 +70,7 @@ function calculate(curr, total) { } // 把页码拆成2部分来 - for (var i = curr - half - fixed; i < curr + half + 1 && i <= total; i++) { + for (let i = curr - half - fixed; i < curr + half + 1 && i <= total; i++) { if (i > 0) { arr.push({ to: i, txt: i }) } @@ -86,7 +78,7 @@ function calculate(curr, total) { // 总页码太多时, 以省略号代替 if (curr + half < total) { - var to = curr + 2 * half + let to = curr + 2 * half to = to > total ? total : to arr.push({ to, txt: '...' }) } @@ -96,19 +88,13 @@ function calculate(curr, total) { class Pager extends Component { static props = { - layout: { - type: String, - default: 'home, prev, pages, next, end', - attribute: false - }, + layout: 'str!home, prev, pages, next, end', total: { type: Number, default: 0, attribute: false, observer(v) { - if (this.#mounted) { - this.totalpage = Math.ceil(v / this.pagesize) - } + this.totalpage = Math.ceil(v / this.pagesize) } }, totalpage: { @@ -160,15 +146,17 @@ class Pager extends Component { justify-content: center; align-items: center; margin: 10px auto; + --wc-button-icon-size: 10px; + --wc-button-border-color: none; + --wc-button-background: var(--color-plain-1); + --wc-button-color-hover: var(--color-teal-1); } .item { min-width: 32px; width: auto; - --padding: 0; margin: 0 5px; - --icon-size: 12px; - border-radius: 4px; + border-radius: 3px; &.curr { display: inline-flex; @@ -183,10 +171,6 @@ class Pager extends Component { display: flex; align-items: center; } - - &[size='l'] { - --icon-size: 12px; - } } input { @@ -210,9 +194,7 @@ class Pager extends Component { css`` ] - #mounted = false - - handleBtnClick(ev) { + #handleBtnClick(ev) { let elem = ev.target if (elem.tagName === 'WC-BUTTON') { let { page, totalpage } = this @@ -242,44 +224,35 @@ class Pager extends Component { } this.page = num - - console.log(this) + this.$refs.input && (this.$refs.input.value = num) this.$emit('page-change', { data: num }) } } - gotoPage(ev) { + __gotoPage(ev) { if (ev.keyCode === 13) { let n = +ev.target.value if (n === n) { this.page = n this.$emit('page-change', { data: n }) } - ev.target.value = n + ev.target.value = this.page } } - mounted() { - this.#mounted = true - } - render() { let layout = this.layout.split(',').map(s => s.trim()) let { page, total, totalpage } = this return html` -
+
${layout.map(n => { switch (n) { case 'pages': return calculate(page, totalpage).map(it => page === it.to ? LAYOUT_DICT.curr(page) - : html`${it.txt}` )