|
@@ -1,174 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="layer" v-if="max>=1">
|
|
|
- <div class="number">
|
|
|
- <span :class="{disablehandle:current==1}" @click="current = current - 1">
|
|
|
- <i class="iconfont iconedit_pre"></i>
|
|
|
- </span>
|
|
|
-
|
|
|
- <template v-if="currMin > min">
|
|
|
- <span @click="current = min">{{ min }}</span>
|
|
|
- <span v-if="currMin - 1 > min">…</span>
|
|
|
- </template>
|
|
|
-
|
|
|
- <span
|
|
|
- v-for="index in numbers"
|
|
|
- :key="index"
|
|
|
- :class="{ active: index === current }"
|
|
|
- @click="current = index"
|
|
|
- >
|
|
|
- {{ index }}
|
|
|
- </span>
|
|
|
-
|
|
|
- <template v-if="currMax < max">
|
|
|
- <span v-if="currMax + 1 < max">…</span>
|
|
|
- <span @click="current = max">{{ max }}</span>
|
|
|
- </template>
|
|
|
-
|
|
|
- <span :class="{disablehandle:current >= max}" @click="current = current + 1">
|
|
|
- <i class="iconfont iconedit_next"></i>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-export default {
|
|
|
- props: ["paging"],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- ...this.paging,
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- min() {
|
|
|
- return 1;
|
|
|
- },
|
|
|
- max() {
|
|
|
- return Math.ceil(this.total / this.pageSize);
|
|
|
- },
|
|
|
- routineMin() {
|
|
|
- return this.current - Math.ceil(this.showSize / 2);
|
|
|
- },
|
|
|
- routineMax() {
|
|
|
- return this.current + Math.floor(this.showSize / 2);
|
|
|
- },
|
|
|
- currMin() {
|
|
|
- let c = this.max - this.routineMax;
|
|
|
-
|
|
|
- if (this.routineMin <= this.min) {
|
|
|
- return this.min;
|
|
|
- } else if (c >= 0) {
|
|
|
- return this.routineMin;
|
|
|
- } else if (this.routineMin + c <= this.min) {
|
|
|
- return this.min;
|
|
|
- } else {
|
|
|
- return this.routineMin + c;
|
|
|
- }
|
|
|
- },
|
|
|
- currMax() {
|
|
|
- let c = this.min - this.routineMin;
|
|
|
-
|
|
|
- if (this.routineMax >= this.max) {
|
|
|
- return this.max;
|
|
|
- } else if (c <= 0) {
|
|
|
- return this.routineMax;
|
|
|
- } else if (this.routineMax + c >= this.max) {
|
|
|
- return this.max;
|
|
|
- } else {
|
|
|
- return this.routineMax + c;
|
|
|
- }
|
|
|
- },
|
|
|
- numbers() {
|
|
|
- let total = this.currMax - this.currMin;
|
|
|
- let numbers = [];
|
|
|
-
|
|
|
- if (total === 0) {
|
|
|
- numbers.push(1);
|
|
|
- } else {
|
|
|
- for (let i = 0; i <= total; i++) {
|
|
|
- numbers.push(this.currMin + i);
|
|
|
- }
|
|
|
- }
|
|
|
- return numbers;
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- current(val, old) {
|
|
|
- if (isNaN(this.current)) {
|
|
|
- return (this.current = old);
|
|
|
- } else if (this.current < this.min) {
|
|
|
- return (this.current = this.min);
|
|
|
- } else if (this.current > this.max) {
|
|
|
- return (this.current = this.max);
|
|
|
- }
|
|
|
- this.$emit("changeCurrent", this.current);
|
|
|
- },
|
|
|
- paging() {
|
|
|
- Object.keys(this.paging).forEach((k) => (this[k] = this.paging[k]));
|
|
|
- },
|
|
|
- "paging.total": function() {
|
|
|
- Object.keys(this.paging).forEach((k) => (this[k] = this.paging[k]));
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-@wh:32px;
|
|
|
-@color:#1983F6;
|
|
|
-
|
|
|
-.layer {
|
|
|
- span {
|
|
|
- font-size: 16px;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- margin: 0 10px;
|
|
|
- color: #202020;
|
|
|
- font-weight: bold;
|
|
|
- width: @wh;
|
|
|
- height: @wh;
|
|
|
- text-align: center;
|
|
|
- border-radius: 2px;
|
|
|
- background: #fff;
|
|
|
- line-height: @wh;
|
|
|
- &.active {
|
|
|
- color: #fff;
|
|
|
- background: @color;
|
|
|
- }
|
|
|
- }
|
|
|
- .number span {
|
|
|
- margin: 0 5px;
|
|
|
- cursor: pointer;
|
|
|
- &:first-of-type{
|
|
|
- margin-left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- div {
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- div input {
|
|
|
- background: none;
|
|
|
- border: 1px solid rgba(85, 85, 85, 1);
|
|
|
- width: 46px;
|
|
|
- height: 28px;
|
|
|
- border-radius: 2px;
|
|
|
- vertical-align: middle;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .disablehandle {
|
|
|
- color: #C0C4CC;
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
-
|
|
|
- .layout .next-page-item:after {
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-color: transparent transparent transparent #011111;
|
|
|
- border-style: solid;
|
|
|
- border-width: 5px 0 5px 8px;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|