图库修改样式

src/views/product/components/mypagination.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="mypagination">
+        <i class="el-icon-arrow-left istyle" @click="minuspage" v-show="pgae != 1"></i>
+        <div>
+            <span style="color: #42d885;">
+                {{ pgae }}
+            </span> / {{ totals }}
+        </div>
+        <i class="el-icon-arrow-right istyle" @click="gopage" v-if="pgae != totals"></i>
+        <div style="width: 26px;" v-else></div>
+        <el-input v-model='pagego' class="inputStyle" @input="oninputEvent" />
+        <el-button type="text" @click="gopages">跳转</el-button>
+
+    </div>
+</template>
+<script>
+
+export default {
+    props: ['total'],
+
+    watch: {
+        totals() {
+            this.pgae = 1
+            this.pagego = 1
+        }
+    },
+    computed: {
+        totals() {
+            let pagedata = this.total / 18
+            return pagedata < 0 ? 1 : Math.ceil(pagedata)
+        }
+    },
+    data() {
+        return { pgae: 1, pagego: 1 }
+    },
+    methods: {
+        oninputEvent(d) {
+            let a = d.replace(/[^\d]/g, '')
+            if (a < (this.totals + 1)) {
+                this.pagego = a
+            } else {
+                this.pagego = this.totals
+            }
+        },
+        gopage() {
+            this.$emit('gopageEvent', ++this.pgae)
+            this.pagego = this.pgae
+        },
+        minuspage() {
+            this.$emit('gopageEvent', --this.pgae)
+            this.pagego = this.pgae
+        },
+        gopages() {
+            this.pgae = this.pagego
+            this.$emit('gopageEvent', this.pagego)
+        }
+    }
+}
+</script>
+<style scoped>
+.mypagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end
+}
+
+.istyle {
+    background-color: #f6f7f8;
+    width: 26px;
+    height: 26px;
+    line-height: 26px;
+    text-align: center;
+}
+
+.inputStyle {
+    width: 50px;
+    margin-right: 10px;
+}
+</style>