分页效果

liuqimichale
1 parent 204d125b
Showing 6 changed files with 33 additions and 51 deletions
package.json
src/assets/css/commonCss/reset.css
src/main.js
src/views/product/components/selectTab0.vue
src/views/product/components/selectTab1.vue
src/views/product/components/selectTab2.vue
@@ -17,6 +17,7 @@
     "scss-loader": "^0.0.1",
     "style-loader": "^1.1.2",
     "swiper": "^4.2.1",
+    "v-page": "^2.0.8",
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^3.1.3",
     "vue-loader": "^13.7.3",
@@ -163,51 +163,8 @@ table {
 }
  
  /*分页*/
-.pageination_align {
-  text-align: center
-}
-
-.pageination {
-  color: #48576a;
-  font-size: 12px;
-  display: inline-block;
-  user-select: none;
-}
-
-.pagination_page {
-  padding: 0 4px;
-  border: 1px solid #d1dbe5;
-  border-right: 0;
-  background: #fff;
-  font-size: 13px;
-  min-width: 28px;
-  height: 28px;
-  line-height: 28px;
-  cursor: pointer;
-  box-sizing: border-box;
-  text-align: center;
-  float: left;
-}
-
-.pagination_page_right {
-  border-right: 1px solid #d1dbe5;
-}
-
-.pagination_page:hover {
-  color: #20a0ff;
-}
-
-.disabled {
-  color: #e4e4e4 !important;
-  background-color: #fff;
-  cursor: not-allowed;
-}
-
-.pagination_page_active {
-  border-color: #20a0ff;
-  background-color: #20a0ff;
-  color: #fff !important;;
-  cursor: default;
+.v-pagination{
+  margin: 20px auto;
 }
  
  
@@ -7,6 +7,9 @@ import router from &#39;./router&#39;
 import 'swiper/dist/css/swiper.css';
  
  
+import VPage from 'v-page';
+Vue.use(VPage);
+
  
 require ('./assets/css/commonCss/reset.css')
  
 <template>
-    <div class="widthCommon">
+    <div class="widthCommon" style="margin-bottom: 20px">
       <ul class="tabCon">
         <li v-for="i in 10" :key="i">
           <div class="tabListImg">
@@ -9,6 +9,9 @@
         </li>
       </ul>
  
+      <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
+      </v-page>
+
     </div>
 </template>
  
@@ -16,7 +19,11 @@
  
 export default {
   name: 'selectTab0',
-
+  methods:{
+    pagePhotoChange:function (pInfo) {
+      console.log(pInfo)
+    }
+  }
  
 }
 </script>
 <template>
-  <div class="widthCommon">
+  <div class="widthCommon" style="margin-bottom: 20px">
     <ul class="tabCon">
       <li v-for="i in 10" :key="i">
         <div class="tabListImg">
@@ -9,6 +9,9 @@
       </li>
     </ul>
  
+    <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
+    </v-page>
+
   </div>
 </template>
  
@@ -16,7 +19,11 @@
  
 export default {
   name: 'selectTab1',
-
+  methods:{
+    pagePhotoChange:function (pInfo) {
+      console.log(pInfo)
+    }
+  }
  
 }
 </script>
 <template>
-  <div class="widthCommon">
+  <div class="widthCommon" style="margin-bottom: 20px">
     <ul class="tabCon">
       <li v-for="i in 10" :key="i">
         <div class="tabListImg">
@@ -9,6 +9,9 @@
       </li>
     </ul>
  
+    <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
+    </v-page>
+
   </div>
 </template>
  
@@ -16,7 +19,11 @@
  
 export default {
   name: 'selectTab2',
-
+  methods:{
+    pagePhotoChange:function (pInfo) {
+      console.log(pInfo)
+    }
+  }
  
 }
 </script>