vsyswin-ui 0.2.43 → 0.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsyswin-ui",
-  "version": "0.2.43",
+  "version": "0.2.44",
   "main": "lib/vsyswin-ui.umd.min.js",
   "private": false,
   "description": "Vue2.x的应用组件库.",

package/packages/index.js

@@ -7,19 +7,20 @@ import selectProject from './select-project' // 项目选择组件
 import selectTree from './select-tree' // 表单树选择器
 import SearchBar from './search-bar' // 搜索工具栏
 import simpleSearchBar from './simple-search-bar' // 简单搜索栏组件
+import paging from './paging'
 import newSearchBar from './newSearchBar' // 高级筛选
 import table from './table' // 表格组件
 import dragSet from './drag-set'
 
 // 存储组件列表
-const components = [layout, searchTree, selectProject, selectTree, SearchBar, simpleSearchBar, newSearchBar, table, dragSet]
+const components = [layout, searchTree, selectProject, selectTree, SearchBar, simpleSearchBar, paging, newSearchBar, table, dragSet]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
-const install = function(Vue) {
+const install = function (Vue) {
   // 判断是否可以安装
   if (install.installed) return
   // 遍历注册全局组件
-  components.map(component => Vue.component(component.name, component))
+  components.map((component) => Vue.component(component.name, component))
 }
 
 // 判断是否是直接引入文件
@@ -37,6 +38,7 @@ export default {
   selectTree,
   SearchBar,
   simpleSearchBar,
+  paging,
   newSearchBar,
   table,
   dragSet

package/packages/paging/index.js

@@ -0,0 +1,10 @@
+// 导入组件
+import paging from './src/paging.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+paging.install = function (Vue) {
+  Vue.component(paging.name, paging)
+}
+
+// 默认导出组件
+export default paging

package/packages/paging/src/paging.vue

@@ -0,0 +1,86 @@
+<!-- 分页组件 -->
+<template>
+  <div :style="alignStyle">
+    <el-pagination
+      class="cus-pagination"
+      background
+      prev-text="上一页"
+      next-text="下一页"
+      size="small"
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+      :current-page="pagination.currentPage"
+      :page-sizes="pageSizes"
+      :page-size="pagination.pageSize"
+      :layout="layout"
+      :total="pagination.totals"
+    >
+      <slot>
+        <span class="el-pagination__total">总共 {{ pagination.totals }} 条，{{ Math.ceil(pagination.totals / pagination.pageSize) }} 页</span>
+      </slot>
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+/*
+  pagination: {
+    currentPage: 1,
+    pageSize: 20,
+    totals: 0
+  }
+*/
+export default {
+  name: 'SyPaging',
+  props: {
+    align: {
+      type: String,
+      default: 'right',
+      validator: function (value) {
+        return ['left', 'center', 'right'].indexOf(value) !== -1
+      }
+    },
+    layout: {
+      type: String,
+      default: 'slot, prev, pager, next, sizes, jumper'
+    },
+    pagination: {
+      type: Object,
+      required: true
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 50, 100, 200]
+      }
+    }
+  },
+  computed: {
+    alignStyle() {
+      return {
+        'text-align': this.align
+      }
+    }
+  },
+  methods: {
+    // 每页数量发生改变
+    handleSizeChange(val) {
+      const { currentPage, totals } = this.pagination
+      const maxNum = Math.ceil(totals / val)
+      this.pagination.currentPage = maxNum < currentPage ? maxNum : currentPage
+      this.pagination.pageSize = val
+      this.handleChange('pageSize')
+    },
+    // 页码发生改变
+    handlePageChange(val) {
+      this.pagination.currentPage = val
+      this.handleChange('currentPage')
+    },
+
+    handleChange(type) {
+      const { currentPage, pageSize } = this.pagination
+      this.$emit('change', { currentPage, pageSize }, type)
+    }
+  }
+}
+</script>