zydx-plus 1.0.12 → 1.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.0.12",
+  "version": "1.1.13",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/pagination/index.js

@@ -0,0 +1,6 @@
+import main from './src/pagination';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/pagination/src/pagination.vue

@@ -0,0 +1,131 @@
+<template>
+  <useOffsetPagination :pageCount="pageCount"
+                       :total="total"
+                       :page="page"
+                       @page:change="pageChange"
+                       v-slot="{
+                         next,
+                         prev,
+                         isFirstPage,
+                         isLastPage
+                       }">
+
+    <div class="paginator">
+      <button :disabled="isFirstPage"
+              class="defaultButton"
+              @click="prev">
+        上一页
+      </button>
+      <div class="paginator_info">
+        <input type="input"
+               class="paginator_input"
+               v-model.number="page" />
+        <span>/</span>
+        <span>{{ pages }}</span>
+      </div>
+      <button :disabled="isLastPage"
+              class="defaultButton"
+              @click="next">
+        下一页
+      </button>
+    </div>
+  </useOffsetPagination>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import useOffsetPagination from './useOffsetPagination.vue';
+export default defineComponent({
+  name: 'zydx-pagination',
+  components: {
+    useOffsetPagination
+  },
+  inheritAttrs: false,
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    pageCount: {
+      type: Number,
+      default: 10
+    }
+  },
+  data() {
+    return {
+      page: 1,
+    }
+  },
+  methods: {
+    pageChange: function (v) {
+      this.$emit('page:change', v)
+      this.page = v
+    }
+  },
+  computed: {
+    pages: function () {
+      return this.total / this.pageCount
+    }
+
+  },
+  watch: {
+    page: {
+      handler: function (v) {
+        if (v >= this.pages) {
+          this.page = this.pages
+        }
+        if (v <= 1) {
+          this.page = 1
+        }
+      }
+    }
+  }
+})
+</script>
+
+<style scoped>
+.paginator_info {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.paginator_input {
+  width: 40px;
+  height: 20px;
+  line-height: 18px;
+  border: 1px solid #ccc;
+  text-align: center;
+}
+
+.defaultButton {
+  margin: 1px;
+  width: auto;
+  min-width: 60px;
+  height: 20px;
+  background-color: #ffffff;
+  color: #000000;
+  border: #000000 1px solid;
+  line-height: 18px;
+  border-radius: 3px;
+  font-size: 12px !important;
+  text-align: center;
+  cursor: pointer;
+  padding: 0 5px;
+  font-weight: normal;
+}
+
+.defaultButton:disabled {
+  background-color: #ffffff;
+  color: #717171;
+  border: #717171 1px solid;
+}
+
+.paginator {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px
+}
+</style>

package/src/components/pagination/src/useOffsetPagination.vue

@@ -0,0 +1,82 @@
+
+<script>
+export const debounceTimer = 500
+export function debounce(fn, delay = debounceTimer) {
+  var timeoutID = null
+  return function () {
+    clearTimeout(timeoutID)
+    var args = arguments
+    var that = this
+    timeoutID = setTimeout(function () {
+      fn.apply(that, args)
+    }, delay)
+  }
+}
+import { defineComponent } from 'vue';
+export default defineComponent({
+  props: {
+    page: {
+      type: Number,
+      default: 1
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    pageCount: {
+      type: Number,
+      default: 10
+    }
+  },
+  inheritAttrs: false,
+  data() {
+    return {
+      currentPage: 1
+    }
+  },
+  methods: {
+    clamp: (num, min, max) => Math.min(Math.max(num, min), max),
+    prev: function () {
+      this.currentPage = this.clamp(this.currentPage - 1, 1, this.pages)
+    },
+    next: function () {
+      this.currentPage = this.clamp(this.currentPage + 1, 1, this.pages)
+    },
+  },
+  computed: {
+    isFirstPage: function () {
+      return this.currentPage === 1
+    },
+    isLastPage: function () {
+      return this.currentPage === this.pages
+    },
+    pages: function () {
+      return this.total / this.pageCount
+    }
+  },
+  watch: {
+    page: {
+      handler: function (v) {
+        this.currentPage = this.clamp(v, 1, this.pages)
+      },
+      immediate: true
+    },
+    currentPage: {
+      handler: debounce(function (v) {
+        this.$emit('page:change', v)
+      }),
+      immediate: true
+    }
+  },
+  render() {
+    return this.$slots.default({
+      currentPage: this.currentPage,
+      next: this.next,
+      prev: this.prev,
+      isFirstPage: this.isFirstPage,
+      isLastPage: this.isLastPage
+    })
+  }
+
+})
+</script>

package/src/index.js

@@ -4,13 +4,15 @@ import Switch from './components/switch/index';
 import menuTree from './components/menuTree/index';
 import coloring from './components/coloring/index';
 import tree from './components/tree/index';
+import Pagination from './components/pagination/index';
 
 const components = [
     Calendar,
     Switch,
     menuTree,
     coloring,
-    tree
+    tree,
+    Pagination
 ];
 
 function install(app) {
@@ -21,13 +23,14 @@ function install(app) {
 }
 
 export default {
-    version: '1.0.12',
+    version: '1.1.12',
     install,
     Calendar,
     Message,
     Switch,
     menuTree,
     coloring,
-    tree
+    tree,
+    Pagination
 };