|
@@ -52,84 +52,85 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
export default {
|
|
export default {
|
|
- props: ["paging"],
|
|
|
|
- data() {
|
|
|
|
|
|
+ props: ['paging'],
|
|
|
|
+ name: 'Page',
|
|
|
|
+ data () {
|
|
return {
|
|
return {
|
|
- ...this.paging,
|
|
|
|
- };
|
|
|
|
|
|
+ ...this.paging
|
|
|
|
+ }
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- min() {
|
|
|
|
- return 1;
|
|
|
|
|
|
+ min () {
|
|
|
|
+ return 1
|
|
},
|
|
},
|
|
- max() {
|
|
|
|
- return Math.ceil(this.total / this.pageSize);
|
|
|
|
|
|
+ max () {
|
|
|
|
+ return Math.ceil(this.total / this.pageSize)
|
|
},
|
|
},
|
|
- routineMin() {
|
|
|
|
- return this.current - Math.ceil(this.showSize / 2);
|
|
|
|
|
|
+ routineMin () {
|
|
|
|
+ return this.current - Math.ceil(this.showSize / 2)
|
|
},
|
|
},
|
|
- routineMax() {
|
|
|
|
- return this.current + Math.floor(this.showSize / 2);
|
|
|
|
|
|
+ routineMax () {
|
|
|
|
+ return this.current + Math.floor(this.showSize / 2)
|
|
},
|
|
},
|
|
- currMin() {
|
|
|
|
- let c = this.max - this.routineMax;
|
|
|
|
|
|
+ currMin () {
|
|
|
|
+ let c = this.max - this.routineMax
|
|
|
|
|
|
if (this.routineMin <= this.min) {
|
|
if (this.routineMin <= this.min) {
|
|
- return this.min;
|
|
|
|
|
|
+ return this.min
|
|
} else if (c >= 0) {
|
|
} else if (c >= 0) {
|
|
- return this.routineMin;
|
|
|
|
|
|
+ return this.routineMin
|
|
} else if (this.routineMin + c <= this.min) {
|
|
} else if (this.routineMin + c <= this.min) {
|
|
- return this.min;
|
|
|
|
|
|
+ return this.min
|
|
} else {
|
|
} else {
|
|
- return this.routineMin + c;
|
|
|
|
|
|
+ return this.routineMin + c
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- currMax() {
|
|
|
|
- let c = this.min - this.routineMin;
|
|
|
|
|
|
+ currMax () {
|
|
|
|
+ let c = this.min - this.routineMin
|
|
|
|
|
|
if (this.routineMax >= this.max) {
|
|
if (this.routineMax >= this.max) {
|
|
- return this.max;
|
|
|
|
|
|
+ return this.max
|
|
} else if (c <= 0) {
|
|
} else if (c <= 0) {
|
|
- return this.routineMax;
|
|
|
|
|
|
+ return this.routineMax
|
|
} else if (this.routineMax + c >= this.max) {
|
|
} else if (this.routineMax + c >= this.max) {
|
|
- return this.max;
|
|
|
|
|
|
+ return this.max
|
|
} else {
|
|
} else {
|
|
- return this.routineMax + c;
|
|
|
|
|
|
+ return this.routineMax + c
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- numbers() {
|
|
|
|
- let total = this.currMax - this.currMin;
|
|
|
|
- let numbers = [];
|
|
|
|
|
|
+ numbers () {
|
|
|
|
+ let total = this.currMax - this.currMin
|
|
|
|
+ let numbers = []
|
|
|
|
|
|
if (total === 0) {
|
|
if (total === 0) {
|
|
- numbers.push(1);
|
|
|
|
|
|
+ numbers.push(1)
|
|
} else {
|
|
} else {
|
|
for (let i = 0; i <= total; i++) {
|
|
for (let i = 0; i <= total; i++) {
|
|
- numbers.push(this.currMin + i);
|
|
|
|
|
|
+ numbers.push(this.currMin + i)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- return numbers;
|
|
|
|
- },
|
|
|
|
|
|
+ return numbers
|
|
|
|
+ }
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
- current(val, old) {
|
|
|
|
|
|
+ current (val, old) {
|
|
if (isNaN(this.current)) {
|
|
if (isNaN(this.current)) {
|
|
- return (this.current = old);
|
|
|
|
|
|
+ return (this.current = old)
|
|
} else if (this.current < this.min) {
|
|
} else if (this.current < this.min) {
|
|
- return (this.current = this.min);
|
|
|
|
|
|
+ return (this.current = this.min)
|
|
} else if (this.current > this.max) {
|
|
} else if (this.current > this.max) {
|
|
- return (this.current = this.max);
|
|
|
|
|
|
+ return (this.current = this.max)
|
|
}
|
|
}
|
|
- this.$emit("changeCurrent", this.current);
|
|
|
|
|
|
+ this.$emit('changeCurrent', this.current)
|
|
},
|
|
},
|
|
paging: {
|
|
paging: {
|
|
deep: true,
|
|
deep: true,
|
|
handler: function (newVal) {
|
|
handler: function (newVal) {
|
|
- Object.keys(newVal).forEach((k) => (this[k] = newVal[k]));
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
|
|
+ Object.keys(newVal).forEach((k) => (this[k] = newVal[k]))
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
@@ -143,7 +144,7 @@ export default {
|
|
width:39px;
|
|
width:39px;
|
|
height:39px;
|
|
height:39px;
|
|
line-height:39px;
|
|
line-height:39px;
|
|
- text-align:center;
|
|
|
|
|
|
+ text-align:center;
|
|
font-family: "Source Han Sans CN";
|
|
font-family: "Source Han Sans CN";
|
|
&.active {
|
|
&.active {
|
|
border-radius:50%;
|
|
border-radius:50%;
|
|
@@ -184,4 +185,4 @@ export default {
|
|
color: #fff;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|