新项目

src/components/pagination/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container e-pagination">
+    <el-pagination
+      :background="background"
+      :current-page.sync="current"
+      :page-size.sync="Size"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+/**
+ * props 参数
+ * @total 默认数据总数
+ * @page  默认开始页面
+ * @limit 每页的数据条数
+ * @pageSizes 分组
+ * */
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [5, 10, 15, 20, 30, 50]
+      }
+    },
+    layout: {
+      type: String,
+      default: 'prev, pager, next, sizes, total, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  /**
+   * page-size    每页显示条目个数，支持 .sync 修饰符
+   * current-page 当前页数，支持 .sync 修饰符
+   * */
+  computed: {
+    current: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    Size: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  /**
+   * pagination 父定义请求函数 getList
+   * */
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { pageNum: this.curren, pageSize: val })
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { pageNum: val, pageSize: this.Size })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.pagination-container.pagesize{
+ float: right;
+ padding: 0;
+}
+.pagination-container {
+  background: #fff;
+  padding: 16px 16px 0 16px;
+  float: right;
+}
+.pagination-container.hidden {
+  display: none;
+}
+.el-pagination {
+  white-space: nowrap;
+  color: #303133;
+  font-weight: bold;
+  height: 28px;
+}
+.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev{
+	padding: 0 20px;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+	background-color: #FFFFFF;
+}
+.e-pagination{
+  .el-icon-arrow-left:before,
+  .el-icon-arrow-right:before{
+  	content: '下一页';
+  	color: #727272;
+  }
+  .el-icon-arrow-left:before{
+  	content: '上一页';
+  }
+}
+
+</style>