From 744a2dfe1dfd055aa87176d24259f31d3467f7d0 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Thu, 25 Feb 2021 16:14:39 +0800
Subject: [PATCH 01/30] refactor(Pagination): add layout parse tools

---
 .../src/components/Pagination/src/tools/parseLayout.ts     | 3 +++
 .../components/Pagination/tests/tools/parseLayout.spec.ts  | 7 +++++++
 2 files changed, 10 insertions(+)
 create mode 100644 packages/element3/src/components/Pagination/src/tools/parseLayout.ts
 create mode 100644 packages/element3/src/components/Pagination/tests/tools/parseLayout.spec.ts

diff --git a/packages/element3/src/components/Pagination/src/tools/parseLayout.ts b/packages/element3/src/components/Pagination/src/tools/parseLayout.ts
new file mode 100644
index 000000000..b8f91757f
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/tools/parseLayout.ts
@@ -0,0 +1,3 @@
+export function parseLayout(layout: string): string[] {
+  return layout.split(',').map((v) => v.trim())
+}
diff --git a/packages/element3/src/components/Pagination/tests/tools/parseLayout.spec.ts b/packages/element3/src/components/Pagination/tests/tools/parseLayout.spec.ts
new file mode 100644
index 000000000..029db225f
--- /dev/null
+++ b/packages/element3/src/components/Pagination/tests/tools/parseLayout.spec.ts
@@ -0,0 +1,7 @@
+import { parseLayout } from '../../src/tools/parseLayout'
+
+describe('parseLayout.ts', () => {
+  it('parse a layout string', () => {
+    expect(parseLayout('prev, pager, next ')).toEqual(['prev', 'pager', 'next'])
+  })
+})

From 23e6451a92918f04cf06a9c10204629b9b1a00f4 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Sun, 28 Feb 2021 17:16:42 +0800
Subject: [PATCH 02/30] refactor(Pagination): core finish

---
 .../components/Pagination/src/entity/Pager.ts |  83 ++++++++++++++
 .../Pagination/tests/entity/Pager.spec.ts     | 106 ++++++++++++++++++
 2 files changed, 189 insertions(+)
 create mode 100644 packages/element3/src/components/Pagination/src/entity/Pager.ts
 create mode 100644 packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts

diff --git a/packages/element3/src/components/Pagination/src/entity/Pager.ts b/packages/element3/src/components/Pagination/src/entity/Pager.ts
new file mode 100644
index 000000000..42ad1f9bd
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/entity/Pager.ts
@@ -0,0 +1,83 @@
+import { makerArray } from '../tools/makerArray'
+
+export class Pager {
+  private _current: number
+  private _count: number
+  private _viewCount: number
+
+  get pagerCountNotSelf(): number {
+    return this._viewCount - 1
+  }
+
+  get halfPager(): number {
+    return Math.floor(this.pagerCountNotSelf / 2)
+  }
+
+  get leftCount(): number {
+    return Math.max(this._current - 1, 0)
+  }
+
+  get rightCount(): number {
+    return Math.max(this._count - this._current, 0)
+  }
+
+  get current(): number {
+    return this._current
+  }
+
+  set current(v: number) {
+    if (v > this.count || v < 1) {
+      console.warn(`[Pager Warn] class Pager.current not over value ${v}.`)
+    }
+    v = Math.min(this.count, v)
+    v = Math.max(1, v)
+    this._current = v
+  }
+
+  get count(): number {
+    return this._count
+  }
+
+  get viewCount(): number {
+    return this._viewCount
+  }
+
+  get pages(): number[] {
+    return makerArray(1, this._count)
+  }
+
+  get viewPages(): number[] {
+    let leftViewCount = Math.min(this.leftCount, this.halfPager)
+    let rightViewCount = Math.min(this.rightCount, this.halfPager)
+
+    if (leftViewCount > rightViewCount) {
+      leftViewCount =
+        this.pagerCountNotSelf - Math.min(rightViewCount, this.halfPager)
+    } else {
+      rightViewCount =
+        this.pagerCountNotSelf - Math.min(leftViewCount, this.halfPager)
+    }
+
+    return this.catOut(
+      this._current - leftViewCount,
+      this._current + rightViewCount
+    )
+  }
+
+  get midViewPages(): number[] {
+    const result = this.viewPages
+    result.shift()
+    result.pop()
+    return result
+  }
+
+  constructor(pageCount: number, currentPage: number, pagerCount: number) {
+    this._count = pageCount
+    this._current = currentPage
+    this._viewCount = pagerCount
+  }
+
+  catOut(start: number, end: number): number[] {
+    return this.pages.slice(Math.max(start - 1, 0), Math.min(end, this._count))
+  }
+}
diff --git a/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts b/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts
new file mode 100644
index 000000000..1c0292821
--- /dev/null
+++ b/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts
@@ -0,0 +1,106 @@
+import { Pager } from '../../src/entity/Pager'
+
+describe('Pager.ts', () => {
+  it('instance Pager', () => {
+    const pageCount = 6
+    const currentPage = 2
+    const pagerCount = 7
+    const pager = new Pager(pageCount, currentPage, pagerCount)
+
+    expect(pager.pages).toHaveLength(6)
+  })
+
+  it('view pages', () => {
+    const pageCount = 10
+    const currentPage = 1
+    const pagerCount = 7
+    const pager = new Pager(pageCount, currentPage, pagerCount)
+
+    expect(pager.midViewPages).toEqual([2, 3, 4, 5, 6])
+
+    pager.current = 2
+    expect(pager.midViewPages).toEqual([2, 3, 4, 5, 6])
+
+    pager.current = 3
+    expect(pager.midViewPages).toEqual([2, 3, 4, 5, 6])
+
+    pager.current = 5
+    expect(pager.midViewPages).toEqual([3, 4, 5, 6, 7])
+
+    pager.current = 8
+    expect(pager.midViewPages).toEqual([5, 6, 7, 8, 9])
+
+    pager.current = 9
+    expect(pager.midViewPages).toEqual([5, 6, 7, 8, 9])
+
+    pager.current = 10
+    expect(pager.midViewPages).toEqual([5, 6, 7, 8, 9])
+
+    expect(pager.leftCount).toBe(9)
+    expect(pager.rightCount).toBe(0)
+  })
+
+  it('test catOut method', () => {
+    const pageCount = 10
+    const currentPage = 2
+    const pagerCount = 7
+    const pager = new Pager(pageCount, currentPage, pagerCount)
+
+    expect(pager.catOut(1, 2)).toEqual([1, 2])
+    expect(pager.catOut(4, 7)).toEqual([4, 5, 6, 7])
+    expect(pager.catOut(0, 11)).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+  })
+
+  it('test pageCount = pagerCount', () => {
+    const pageCount = 10
+    const currentPage = 2
+    const pagerCount = 10
+    const pager = new Pager(pageCount, currentPage, pagerCount)
+
+    expect(pager.viewPages).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+    expect(pager.leftCount).toBe(1)
+    expect(pager.rightCount).toBe(8)
+  })
+
+  it('test viewPages', () => {
+    const pageCount = 10
+    const currentPage = 1
+    const pagerCount = 5
+    const pager = new Pager(pageCount, currentPage, pagerCount)
+
+    expect(pager.viewPages).toEqual([1, 2, 3, 4, 5])
+
+    pager.current = 2
+    expect(pager.viewPages).toEqual([1, 2, 3, 4, 5])
+
+    pager.current = 3
+    expect(pager.viewPages).toEqual([1, 2, 3, 4, 5])
+
+    pager.current = 4
+    expect(pager.viewPages).toEqual([2, 3, 4, 5, 6])
+
+    pager.current = 5
+    expect(pager.viewPages).toEqual([3, 4, 5, 6, 7])
+
+    pager.current = 6
+    expect(pager.viewPages).toEqual([4, 5, 6, 7, 8])
+
+    pager.current = 7
+    expect(pager.viewPages).toEqual([5, 6, 7, 8, 9])
+
+    pager.current = 8
+    expect(pager.viewPages).toEqual([6, 7, 8, 9, 10])
+
+    pager.current = 9
+    expect(pager.viewPages).toEqual([6, 7, 8, 9, 10])
+
+    pager.current = 10
+    expect(pager.viewPages).toEqual([6, 7, 8, 9, 10])
+
+    pager.current = 0
+    expect(pager.viewPages).toEqual([1, 2, 3, 4, 5])
+
+    pager.current = 11
+    expect(pager.viewPages).toEqual([6, 7, 8, 9, 10])
+  })
+})

From 661a4502dcd4f09656565e5135586acfa4e07c35 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Sun, 28 Feb 2021 17:17:58 +0800
Subject: [PATCH 03/30] refactor(Pagination): layout Pager component show page
 number ok

---
 .../components/Pagination/src/parts/Pager.vue | 47 +++++++++++
 .../Pagination/tests/parts/Pager.spec.ts      | 82 +++++++++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 packages/element3/src/components/Pagination/src/parts/Pager.vue
 create mode 100644 packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts

diff --git a/packages/element3/src/components/Pagination/src/parts/Pager.vue b/packages/element3/src/components/Pagination/src/parts/Pager.vue
new file mode 100644
index 000000000..cf56c8300
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/parts/Pager.vue
@@ -0,0 +1,47 @@
+<template>
+  <ul class="el-pager">
+    <li
+      v-if="pager.count >= 1"
+      class="number"
+      :class="{ active: pager.current === 1 }"
+    >
+      1
+    </li>
+    <li
+      v-if="pager.count > pager.viewCount && pager.leftCount > pager.halfPager"
+      class="el-icon more btn-quickprev"
+    ></li>
+    <li
+      v-for="page in pager.midViewPages"
+      v-text="page"
+      :key="page"
+      class="number"
+      :class="{
+        active: pager.current === page
+      }"
+    ></li>
+    <li
+      v-if="pager.count > pager.viewCount && pager.rightCount > pager.halfPager"
+      class="el-icon more btn-quicknext"
+    ></li>
+    <li
+      v-if="pager.count >= 2"
+      v-text="pager.count"
+      class="number"
+      :class="{
+        active: pager.current === pager.count
+      }"
+    ></li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { Pager } from '../entity/Pager'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    pager: Pager
+  }
+})
+</script>
diff --git a/packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts b/packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts
new file mode 100644
index 000000000..70aa1b227
--- /dev/null
+++ b/packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts
@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils'
+import { Pager } from '../../src/entity/Pager'
+import ElPager from '../../src/parts/Pager.vue'
+
+describe('Pager.vue', () => {
+  it('show page pageCount <= pagerCount', () => {
+    const pager = new Pager(5, 3, 7)
+    const wrapper = mount(ElPager, {
+      props: {
+        pager
+      }
+    })
+
+    expect(wrapper.findAll('.number')).toHaveLength(5)
+    expect(wrapper.findAll('.number').map((item) => item.text())).toEqual([
+      '1',
+      '2',
+      '3',
+      '4',
+      '5'
+    ])
+    expect(wrapper.find('.number.active').text()).toBe('3')
+    expect(wrapper.findAll('.el-icon.more')).toHaveLength(0)
+  })
+  it('show page pageCount > pagerCount currentPage is 4', () => {
+    const pager = new Pager(30, 4, 7)
+
+    const wrapper = mount(ElPager, {
+      props: {
+        pager
+      }
+    })
+
+    expect(wrapper.findAll('.number')).toHaveLength(7)
+    expect(wrapper.find('.el-icon.more.btn-quickprev').exists()).toBeFalsy()
+    expect(wrapper.find('.el-icon.more.btn-quicknext').exists()).toBeTruthy()
+  })
+  it('show page pageCount > pagerCount currentPage is 27', () => {
+    const pager = new Pager(30, 27, 7)
+
+    const wrapper = mount(ElPager, {
+      props: {
+        pager
+      }
+    })
+
+    expect(wrapper.findAll('.number')).toHaveLength(7)
+    expect(wrapper.find('.el-icon.more.btn-quickprev').exists()).toBeTruthy()
+    expect(wrapper.find('.el-icon.more.btn-quicknext').exists()).toBeFalsy()
+  })
+  it('show page pageCount > pagerCount', () => {
+    const pager = new Pager(30, 10, 7)
+
+    const wrapper = mount(ElPager, {
+      props: {
+        pager
+      }
+    })
+
+    expect(wrapper.findAll('.number')).toHaveLength(7)
+    expect(wrapper.findAll('.el-icon.more')).toHaveLength(2)
+    expect(wrapper.find('.number.active').text()).toBe('10')
+  })
+
+  it('when pageCount less', () => {
+    const currentPage = 1
+    const pageCount = 2
+    const pagerCount = 7
+    const wrapper = mount(ElPager, {
+      props: {
+        pager: new Pager(pageCount, currentPage, pagerCount)
+      }
+    })
+
+    expect(wrapper.findAll('.number')).toHaveLength(2)
+    expect(wrapper.findAll('.number').map((item) => item.text())).toEqual([
+      '1',
+      '2'
+    ])
+    expect(wrapper.find('.number.active').text()).toBe('1')
+  })
+})

From 085adbbb45918234e5d5be02d496cbe3760d6378 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Sun, 28 Feb 2021 17:19:08 +0800
Subject: [PATCH 04/30] refactor(Pagination): make array tools

---
 .../src/components/Pagination/src/tools/makerArray.ts      | 5 +++++
 .../components/Pagination/tests/tools/makerArray.spec.ts   | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 packages/element3/src/components/Pagination/src/tools/makerArray.ts
 create mode 100644 packages/element3/src/components/Pagination/tests/tools/makerArray.spec.ts

diff --git a/packages/element3/src/components/Pagination/src/tools/makerArray.ts b/packages/element3/src/components/Pagination/src/tools/makerArray.ts
new file mode 100644
index 000000000..68ff86429
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/tools/makerArray.ts
@@ -0,0 +1,5 @@
+export function makerArray(start: number, end: number): number[] {
+  const arr = []
+  for (let i = start; i <= end; i++) arr.push(i)
+  return arr
+}
diff --git a/packages/element3/src/components/Pagination/tests/tools/makerArray.spec.ts b/packages/element3/src/components/Pagination/tests/tools/makerArray.spec.ts
new file mode 100644
index 000000000..053e1cd7a
--- /dev/null
+++ b/packages/element3/src/components/Pagination/tests/tools/makerArray.spec.ts
@@ -0,0 +1,7 @@
+import { makerArray } from '../../src/tools/makerArray'
+
+describe('makerArray.ts', () => {
+  it('test create 2-6 array', () => {
+    expect(makerArray(2, 6)).toEqual([2, 3, 4, 5, 6])
+  })
+})

From 2c60d10688a8017222bfc38ad64197142537eacf Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Sun, 28 Feb 2021 18:53:28 +0800
Subject: [PATCH 05/30] refactor(Pagination): add hover class

---
 .../components/Pagination/src/parts/Pager.vue | 40 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/element3/src/components/Pagination/src/parts/Pager.vue b/packages/element3/src/components/Pagination/src/parts/Pager.vue
index cf56c8300..a2ae68da8 100644
--- a/packages/element3/src/components/Pagination/src/parts/Pager.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Pager.vue
@@ -9,7 +9,19 @@
     </li>
     <li
       v-if="pager.count > pager.viewCount && pager.leftCount > pager.halfPager"
-      class="el-icon more btn-quickprev"
+      class="el-icon more btn-quickprev el-icon-more"
+      @mouseenter="
+        switchClass($event.target, true, [
+          'el-icon-d-arrow-left',
+          'el-icon-more'
+        ])
+      "
+      @mouseleave="
+        switchClass($event.target, false, [
+          'el-icon-d-arrow-left',
+          'el-icon-more'
+        ])
+      "
     ></li>
     <li
       v-for="page in pager.midViewPages"
@@ -22,7 +34,19 @@
     ></li>
     <li
       v-if="pager.count > pager.viewCount && pager.rightCount > pager.halfPager"
-      class="el-icon more btn-quicknext"
+      class="el-icon more btn-quicknext el-icon-more"
+      @mouseenter="
+        switchClass($event.target, true, [
+          'el-icon-d-arrow-right',
+          'el-icon-more'
+        ])
+      "
+      @mouseleave="
+        switchClass($event.target, false, [
+          'el-icon-d-arrow-right',
+          'el-icon-more'
+        ])
+      "
     ></li>
     <li
       v-if="pager.count >= 2"
@@ -42,6 +66,18 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   props: {
     pager: Pager
+  },
+  setup() {
+    const switchClass = (el, flag, [a, b]) => {
+      if (flag) {
+        el.classList.add(a)
+        el.classList.remove(b)
+      } else {
+        el.classList.remove(a)
+        el.classList.add(b)
+      }
+    }
+    return { switchClass }
   }
 })
 </script>

From d214ccb9535baa2a366071d00c374db66e0bb391 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Sun, 28 Feb 2021 18:54:13 +0800
Subject: [PATCH 06/30] refactor(Pagination): add prev/next btn

---
 .../element3/src/components/Pagination/src/parts/Next.vue    | 5 +++++
 .../element3/src/components/Pagination/src/parts/Prev.vue    | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 packages/element3/src/components/Pagination/src/parts/Next.vue
 create mode 100644 packages/element3/src/components/Pagination/src/parts/Prev.vue

diff --git a/packages/element3/src/components/Pagination/src/parts/Next.vue b/packages/element3/src/components/Pagination/src/parts/Next.vue
new file mode 100644
index 000000000..34252089d
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/parts/Next.vue
@@ -0,0 +1,5 @@
+<template>
+  <button type="button" class="btn-next">
+    <i class="el-icon el-icon-arrow-right"></i>
+  </button>
+</template>
diff --git a/packages/element3/src/components/Pagination/src/parts/Prev.vue b/packages/element3/src/components/Pagination/src/parts/Prev.vue
new file mode 100644
index 000000000..7959fa812
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/parts/Prev.vue
@@ -0,0 +1,5 @@
+<template>
+  <button type="button" class="btn-prev">
+    <i class="el-icon el-icon-arrow-left"></i>
+  </button>
+</template>

From bc025ca33e064f0c07169693612f76c0ab77df20 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Mon, 1 Mar 2021 17:16:20 +0800
Subject: [PATCH 07/30] refactor(Pagination): Modify the Pager incoming
 parameters

---
 .../components/Pagination/src/entity/Pager.ts | 31 ++++++++----
 .../Pagination/tests/entity/Pager.spec.ts     | 49 +++++++++++++++++--
 .../Pagination/tests/parts/Pager.spec.ts      | 15 +++---
 3 files changed, 73 insertions(+), 22 deletions(-)

diff --git a/packages/element3/src/components/Pagination/src/entity/Pager.ts b/packages/element3/src/components/Pagination/src/entity/Pager.ts
index 42ad1f9bd..630141f25 100644
--- a/packages/element3/src/components/Pagination/src/entity/Pager.ts
+++ b/packages/element3/src/components/Pagination/src/entity/Pager.ts
@@ -1,10 +1,22 @@
 import { makerArray } from '../tools/makerArray'
 
+export interface PagerParam {
+  size: number
+  total: number
+  current: number
+  viewCount: number
+}
+
 export class Pager {
   private _current: number
-  private _count: number
+  private _total: number
+  private _size: number
   private _viewCount: number
 
+  get total(): number {
+    return this._total
+  }
+
   get pagerCountNotSelf(): number {
     return this._viewCount - 1
   }
@@ -18,7 +30,7 @@ export class Pager {
   }
 
   get rightCount(): number {
-    return Math.max(this._count - this._current, 0)
+    return Math.max(this.count - this._current, 0)
   }
 
   get current(): number {
@@ -35,7 +47,7 @@ export class Pager {
   }
 
   get count(): number {
-    return this._count
+    return Math.ceil(this._total / this._size)
   }
 
   get viewCount(): number {
@@ -43,7 +55,7 @@ export class Pager {
   }
 
   get pages(): number[] {
-    return makerArray(1, this._count)
+    return makerArray(1, this.count)
   }
 
   get viewPages(): number[] {
@@ -71,13 +83,14 @@ export class Pager {
     return result
   }
 
-  constructor(pageCount: number, currentPage: number, pagerCount: number) {
-    this._count = pageCount
-    this._current = currentPage
-    this._viewCount = pagerCount
+  constructor(pagerParam: PagerParam) {
+    this._size = pagerParam.size
+    this._total = pagerParam.total
+    this._current = pagerParam.current
+    this._viewCount = pagerParam.viewCount
   }
 
   catOut(start: number, end: number): number[] {
-    return this.pages.slice(Math.max(start - 1, 0), Math.min(end, this._count))
+    return this.pages.slice(Math.max(start - 1, 0), Math.min(end, this.count))
   }
 }
diff --git a/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts b/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts
index 1c0292821..18ae58df4 100644
--- a/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts
@@ -5,7 +5,12 @@ describe('Pager.ts', () => {
     const pageCount = 6
     const currentPage = 2
     const pagerCount = 7
-    const pager = new Pager(pageCount, currentPage, pagerCount)
+    const pager = new Pager({
+      total: pageCount,
+      size: 1,
+      current: currentPage,
+      viewCount: pagerCount
+    })
 
     expect(pager.pages).toHaveLength(6)
   })
@@ -14,7 +19,12 @@ describe('Pager.ts', () => {
     const pageCount = 10
     const currentPage = 1
     const pagerCount = 7
-    const pager = new Pager(pageCount, currentPage, pagerCount)
+    const pager = new Pager({
+      total: pageCount,
+      size: 1,
+      current: currentPage,
+      viewCount: pagerCount
+    })
 
     expect(pager.midViewPages).toEqual([2, 3, 4, 5, 6])
 
@@ -44,7 +54,12 @@ describe('Pager.ts', () => {
     const pageCount = 10
     const currentPage = 2
     const pagerCount = 7
-    const pager = new Pager(pageCount, currentPage, pagerCount)
+    const pager = new Pager({
+      total: pageCount,
+      size: 1,
+      current: currentPage,
+      viewCount: pagerCount
+    })
 
     expect(pager.catOut(1, 2)).toEqual([1, 2])
     expect(pager.catOut(4, 7)).toEqual([4, 5, 6, 7])
@@ -55,7 +70,12 @@ describe('Pager.ts', () => {
     const pageCount = 10
     const currentPage = 2
     const pagerCount = 10
-    const pager = new Pager(pageCount, currentPage, pagerCount)
+    const pager = new Pager({
+      total: pageCount,
+      size: 1,
+      current: currentPage,
+      viewCount: pagerCount
+    })
 
     expect(pager.viewPages).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
     expect(pager.leftCount).toBe(1)
@@ -66,7 +86,12 @@ describe('Pager.ts', () => {
     const pageCount = 10
     const currentPage = 1
     const pagerCount = 5
-    const pager = new Pager(pageCount, currentPage, pagerCount)
+    const pager = new Pager({
+      total: pageCount,
+      size: 1,
+      current: currentPage,
+      viewCount: pagerCount
+    })
 
     expect(pager.viewPages).toEqual([1, 2, 3, 4, 5])
 
@@ -103,4 +128,18 @@ describe('Pager.ts', () => {
     pager.current = 11
     expect(pager.viewPages).toEqual([6, 7, 8, 9, 10])
   })
+  it('test total', () => {
+    const total = 100
+    const currentPage = 2
+    const pagerCount = 7
+    const pageSize = 10
+    const pager = new Pager({
+      total: total,
+      size: pageSize,
+      current: currentPage,
+      viewCount: pagerCount
+    })
+
+    expect(pager.count).toBe(10)
+  })
 })
diff --git a/packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts b/packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts
index 70aa1b227..8288f5b45 100644
--- a/packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts
@@ -4,7 +4,7 @@ import ElPager from '../../src/parts/Pager.vue'
 
 describe('Pager.vue', () => {
   it('show page pageCount <= pagerCount', () => {
-    const pager = new Pager(5, 3, 7)
+    const pager = new Pager({ total: 5, size: 1, current: 3, viewCount: 7 })
     const wrapper = mount(ElPager, {
       props: {
         pager
@@ -23,7 +23,7 @@ describe('Pager.vue', () => {
     expect(wrapper.findAll('.el-icon.more')).toHaveLength(0)
   })
   it('show page pageCount > pagerCount currentPage is 4', () => {
-    const pager = new Pager(30, 4, 7)
+    const pager = new Pager({ total: 30, size: 1, current: 4, viewCount: 7 })
 
     const wrapper = mount(ElPager, {
       props: {
@@ -36,7 +36,7 @@ describe('Pager.vue', () => {
     expect(wrapper.find('.el-icon.more.btn-quicknext').exists()).toBeTruthy()
   })
   it('show page pageCount > pagerCount currentPage is 27', () => {
-    const pager = new Pager(30, 27, 7)
+    const pager = new Pager({ total: 30, size: 1, current: 27, viewCount: 7 })
 
     const wrapper = mount(ElPager, {
       props: {
@@ -49,7 +49,7 @@ describe('Pager.vue', () => {
     expect(wrapper.find('.el-icon.more.btn-quicknext').exists()).toBeFalsy()
   })
   it('show page pageCount > pagerCount', () => {
-    const pager = new Pager(30, 10, 7)
+    const pager = new Pager({ total: 30, size: 1, current: 10, viewCount: 7 })
 
     const wrapper = mount(ElPager, {
       props: {
@@ -63,12 +63,11 @@ describe('Pager.vue', () => {
   })
 
   it('when pageCount less', () => {
-    const currentPage = 1
-    const pageCount = 2
-    const pagerCount = 7
+    const pager = new Pager({ total: 2, size: 1, current: 1, viewCount: 7 })
+
     const wrapper = mount(ElPager, {
       props: {
-        pager: new Pager(pageCount, currentPage, pagerCount)
+        pager
       }
     })
 

From 263184fd18efbcb8ed6f8fa3192a4d7465d950b2 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Mon, 1 Mar 2021 17:21:27 +0800
Subject: [PATCH 08/30] refactor(Pagination): add Total Part

---
 .../components/Pagination/src/parts/Total.vue | 12 +++++++++++
 .../Pagination/tests/parts/Total.spec.ts      | 20 +++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 packages/element3/src/components/Pagination/src/parts/Total.vue
 create mode 100644 packages/element3/src/components/Pagination/tests/parts/Total.spec.ts

diff --git a/packages/element3/src/components/Pagination/src/parts/Total.vue b/packages/element3/src/components/Pagination/src/parts/Total.vue
new file mode 100644
index 000000000..e47efb875
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/parts/Total.vue
@@ -0,0 +1,12 @@
+<template>
+  <span class="el-pagination__total" v-text="`共 ${pager.total} 条`"></span>
+</template>
+
+<script lang="ts">
+import { Pager } from '../entity/Pager'
+export default {
+  props: {
+    pager: Pager
+  }
+}
+</script>
diff --git a/packages/element3/src/components/Pagination/tests/parts/Total.spec.ts b/packages/element3/src/components/Pagination/tests/parts/Total.spec.ts
new file mode 100644
index 000000000..1e28db18e
--- /dev/null
+++ b/packages/element3/src/components/Pagination/tests/parts/Total.spec.ts
@@ -0,0 +1,20 @@
+import { mount } from '@vue/test-utils'
+import { Pager } from '../../src/entity/Pager'
+import Total from '../../src/parts/Total.vue'
+
+describe('Total.vue', () => {
+  it('show total', () => {
+    const wrapper = mount(Total, {
+      props: {
+        pager: new Pager({
+          total: 10,
+          size: 1,
+          current: 2,
+          viewCount: 7
+        })
+      }
+    })
+
+    expect(wrapper.text()).toBe(`共 ${10} 条`)
+  })
+})

From 833937c5b466f1717d397696c0e7c946ab863f7f Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Mon, 1 Mar 2021 17:33:22 +0800
Subject: [PATCH 09/30] refactor(Pagination): Complete page number
 display(hug-sun#567)

---
 .../components/Pagination/src/Pagination.vue  | 87 +++++++++++++++++++
 .../Pagination/tests/Pagination.spec.ts       | 68 +++++++++++++++
 2 files changed, 155 insertions(+)
 create mode 100644 packages/element3/src/components/Pagination/src/Pagination.vue
 create mode 100644 packages/element3/src/components/Pagination/tests/Pagination.spec.ts

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
new file mode 100644
index 000000000..d5e9ec19e
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -0,0 +1,87 @@
+<template>
+  <div v-if="pager.count > 1" class="el-pagination">
+    <template v-for="(part, index) in layoutPart" :key="index">
+      <component :is="part" :pager="pager"></component>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  reactive,
+  toRefs,
+  watch,
+  watchEffect
+} from 'vue'
+import { ElPaginationProps } from '../types'
+import { Pager as PagerCore } from './entity/Pager'
+import { parseLayout } from './tools/parseLayout'
+
+import Pager from './parts/Pager.vue'
+import Prev from './parts/Prev.vue'
+import Next from './parts/Next.vue'
+import Total from './parts/Total.vue'
+
+export default defineComponent({
+  name: 'ElPagination',
+  props: {
+    layout: {
+      type: String,
+      default: 'prev, pager, next, jumper, total'
+    },
+    pagerCount: {
+      type: Number,
+      default: 7
+    },
+
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    pageCount: {
+      type: Number,
+      default: 0
+    },
+    total: {
+      type: Number
+    },
+    pageSize: {
+      type: Number,
+      default: 1
+    },
+    hideOnSinglePage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    Pager,
+    Prev,
+    Next,
+    Total
+  },
+  setup(props: ElPaginationProps) {
+    const { currentPage, total, pageSize, pagerCount, pageCount } = toRefs(
+      props
+    )
+    const layoutPart = computed(() => parseLayout(props.layout))
+    const pager = reactive(
+      new PagerCore({
+        total: total?.value ?? pageCount.value,
+        size: pageSize.value,
+        viewCount: pagerCount.value,
+        current: currentPage.value
+      })
+    )
+
+    return {
+      layoutPart,
+      pager
+    }
+  }
+})
+</script>
+
+<style></style>
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
new file mode 100644
index 000000000..b7537ed86
--- /dev/null
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -0,0 +1,68 @@
+import { mount } from '@vue/test-utils'
+import Pagination from '../src/Pagination.vue'
+import Prev from '../src/parts/Prev.vue'
+import Next from '../src/parts/Next.vue'
+import Pager from '../src/parts/Pager.vue'
+import Total from '../src/parts/Total.vue'
+
+describe('Pagination.vue', () => {
+  it('Realize layout prev,pager,next', () => {
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'prev, pager, next, total',
+        currentPage: 2,
+        pageCount: 5
+      }
+    })
+
+    expect(wrapper.findComponent(Prev).exists()).toBeTruthy()
+    expect(wrapper.findComponent(Next).exists()).toBeTruthy()
+    expect(wrapper.findComponent(Pager).exists()).toBeTruthy()
+    expect(wrapper.findComponent(Total).exists()).toBeTruthy()
+  })
+  it('Realize simple paging display', () => {
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'prev, pager, next',
+        currentPage: 2,
+        pageCount: 5
+      }
+    })
+
+    const pager = wrapper.vm.pager
+
+    expect(wrapper.findComponent(Pager).vm.pager).toBe(pager)
+    expect(pager.current).toBe(2)
+    expect(pager.count).toBe(5)
+  })
+  it('Calculate page numbers by Total and pageSize', () => {
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'prev, pager, next, total',
+        currentPage: 2,
+        pageSize: 10,
+        total: 100
+      }
+    })
+
+    const pager = wrapper.vm.pager
+
+    expect(wrapper.findComponent(Total).vm.pager).toBe(pager)
+    expect(pager.current).toBe(2)
+    expect(pager.count).toBe(10)
+  })
+
+  it('Hide when there is only one page', () => {
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'pager',
+        currentPage: 1,
+        pageSize: 1,
+        total: 1,
+        hideOnSinglePage: true
+      }
+    })
+
+    expect(wrapper.findComponent(Pager).exists()).toBeFalsy()
+  })
+})

From 961f1aeac244a6eeb0e3088d5a0ae468dbfad6f0 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Mon, 1 Mar 2021 17:53:16 +0800
Subject: [PATCH 10/30] refactor(Pagination): To optimize the Code

---
 .../components/Pagination/src/Pagination.vue  | 52 +++++++++++++------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index d5e9ec19e..2be08f411 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -13,7 +13,8 @@ import {
   reactive,
   toRefs,
   watch,
-  watchEffect
+  watchEffect,
+  Ref
 } from 'vue'
 import { ElPaginationProps } from '../types'
 import { Pager as PagerCore } from './entity/Pager'
@@ -63,18 +64,22 @@ export default defineComponent({
     Total
   },
   setup(props: ElPaginationProps) {
-    const { currentPage, total, pageSize, pagerCount, pageCount } = toRefs(
-      props
-    )
-    const layoutPart = computed(() => parseLayout(props.layout))
-    const pager = reactive(
-      new PagerCore({
-        total: total?.value ?? pageCount.value,
-        size: pageSize.value,
-        viewCount: pagerCount.value,
-        current: currentPage.value
-      })
-    )
+    const {
+      currentPage,
+      total,
+      pageSize,
+      pagerCount,
+      pageCount,
+      layout
+    } = toRefs(props)
+    const { layoutPart } = useLayout(layout)
+    const { pager } = usePager({
+      currentPage,
+      total,
+      pageSize,
+      pagerCount,
+      pageCount
+    })
 
     return {
       layoutPart,
@@ -82,6 +87,23 @@ export default defineComponent({
     }
   }
 })
-</script>
 
-<style></style>
+function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
+  const pager = reactive(
+    new PagerCore({
+      total: total?.value ?? pageCount.value,
+      size: pageSize.value,
+      viewCount: pagerCount.value,
+      current: currentPage.value
+    })
+  )
+  return { pager }
+}
+
+function useLayout(layout: Ref<string>) {
+  const layoutPart = computed(() => parseLayout(layout.value))
+  return {
+    layoutPart
+  }
+}
+</script>

From 31b6fc1d85eb4e6e5f19a5a7a7d418cd554e533b Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Mon, 1 Mar 2021 18:11:01 +0800
Subject: [PATCH 11/30] refactor(Pagination): test coverage 100%

---
 .../Pagination/tests/parts/Pager.spec.ts      | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts b/packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts
index 8288f5b45..ca4fda822 100644
--- a/packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/parts/Pager.spec.ts
@@ -78,4 +78,29 @@ describe('Pager.vue', () => {
     ])
     expect(wrapper.find('.number.active').text()).toBe('1')
   })
+
+  it('more btn mouse enter and leave', async () => {
+    const pager = new Pager({ total: 100, size: 1, current: 50, viewCount: 7 })
+
+    const wrapper = mount(ElPager, {
+      props: {
+        pager
+      }
+    })
+
+    const quickPrev = wrapper.find('.btn-quickprev')
+    const quickNext = wrapper.find('.btn-quicknext')
+
+    await quickPrev.trigger('mouseenter')
+    await quickNext.trigger('mouseenter')
+
+    expect(quickPrev.classes()).toContain('el-icon-d-arrow-left')
+    expect(quickNext.classes()).toContain('el-icon-d-arrow-right')
+
+    await quickPrev.trigger('mouseleave')
+    await quickNext.trigger('mouseleave')
+
+    expect(quickPrev.classes()).toContain('el-icon-more')
+    expect(quickNext.classes()).toContain('el-icon-more')
+  })
 })

From 4171fab4a0e4d4d09c4667916029250471dcb4e8 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Thu, 4 Mar 2021 13:54:03 +0800
Subject: [PATCH 12/30] refactor(Pagination): add props type

---
 .../element3/src/components/Pagination/types.ts   | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 packages/element3/src/components/Pagination/types.ts

diff --git a/packages/element3/src/components/Pagination/types.ts b/packages/element3/src/components/Pagination/types.ts
new file mode 100644
index 000000000..39e585235
--- /dev/null
+++ b/packages/element3/src/components/Pagination/types.ts
@@ -0,0 +1,15 @@
+export interface ElPaginationProps {
+  layout?: string
+  pagerCount?: number
+  currentPage?: number
+  pageCount?: number
+  total?: number
+  pageSize?: number
+  hideOnSinglePage?: boolean
+}
+
+declare class ElPagination {
+  $props: ElPaginationProps
+}
+
+export default ElPagination

From 2d649eebb7ba9031d3eed61b36604c78c70d17b6 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Thu, 4 Mar 2021 17:26:06 +0800
Subject: [PATCH 13/30] refactor(Pagination): Complete the previous page to the
 next page switch

---
 .../components/Pagination/src/Pagination.vue  | 37 +++++++-
 .../components/Pagination/src/entity/Pager.ts | 61 +++++++++++--
 .../components/Pagination/src/parts/Next.vue  | 13 ++-
 .../components/Pagination/src/parts/Pager.vue | 42 ++-------
 .../components/Pagination/src/parts/Prev.vue  | 13 ++-
 .../Pagination/src/tools/element.ts           | 12 +++
 .../Pagination/tests/Pagination.spec.ts       | 34 ++++++++
 .../Pagination/tests/entity/Pager.spec.ts     | 86 ++++++++++++++++++-
 .../Pagination/tests/tools/element.spec.ts    | 14 +++
 9 files changed, 265 insertions(+), 47 deletions(-)
 create mode 100644 packages/element3/src/components/Pagination/src/tools/element.ts
 create mode 100644 packages/element3/src/components/Pagination/tests/tools/element.spec.ts

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index 2be08f411..a5b3b6440 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -14,10 +14,11 @@ import {
   toRefs,
   watch,
   watchEffect,
-  Ref
+  Ref,
+  getCurrentInstance
 } from 'vue'
 import { ElPaginationProps } from '../types'
-import { Pager as PagerCore } from './entity/Pager'
+import { Pager as PagerCore, PagerEventType } from './entity/Pager'
 import { parseLayout } from './tools/parseLayout'
 
 import Pager from './parts/Pager.vue'
@@ -42,8 +43,7 @@ export default defineComponent({
       default: 1
     },
     pageCount: {
-      type: Number,
-      default: 0
+      type: Number
     },
     total: {
       type: Number
@@ -57,6 +57,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['update:currentPage', 'prev-click', 'next-click'],
   components: {
     Pager,
     Prev,
@@ -89,6 +90,7 @@ export default defineComponent({
 })
 
 function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
+  const { emit } = getCurrentInstance()
   const pager = reactive(
     new PagerCore({
       total: total?.value ?? pageCount.value,
@@ -97,6 +99,33 @@ function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
       current: currentPage.value
     })
   )
+  pager.on(PagerEventType.CHANGE, (v) => {
+    emit('update:currentPage', v)
+  })
+  pager.on(PagerEventType.PREV, (v) => {
+    emit('prev-click', v)
+  })
+  pager.on(PagerEventType.NEXT, (v) => {
+    emit('next-click', v)
+  })
+  if (total)
+    watch(total, (v: number) => {
+      pager.total = v
+    })
+  if (pageCount)
+    watch(pageCount, (v: number) => {
+      pager.total = v
+      pager.changeSize(1)
+    })
+  watch(pagerCount, (v: number) => {
+    pager.viewCount = v
+  })
+  watch(pageSize, (v: number) => {
+    pager.size = v
+  })
+  watch(currentPage, (v: number) => {
+    pager.current = v
+  })
   return { pager }
 }
 
diff --git a/packages/element3/src/components/Pagination/src/entity/Pager.ts b/packages/element3/src/components/Pagination/src/entity/Pager.ts
index 630141f25..2a192cc1e 100644
--- a/packages/element3/src/components/Pagination/src/entity/Pager.ts
+++ b/packages/element3/src/components/Pagination/src/entity/Pager.ts
@@ -1,5 +1,14 @@
+import mitt from 'mitt'
 import { makerArray } from '../tools/makerArray'
 
+export enum PagerEventType {
+  CHANGE = 'change',
+  PREV = 'prev',
+  NEXT = 'next'
+}
+
+export type PagerEventCb = (pageNumber: number) => void
+
 export interface PagerParam {
   size: number
   total: number
@@ -12,11 +21,24 @@ export class Pager {
   private _total: number
   private _size: number
   private _viewCount: number
+  private _event = mitt()
+
+  get size(): number {
+    return this._size
+  }
+
+  set size(v: number) {
+    this.changeSize(v)
+  }
 
   get total(): number {
     return this._total
   }
 
+  set total(v: number) {
+    this._total = v
+  }
+
   get pagerCountNotSelf(): number {
     return this._viewCount - 1
   }
@@ -38,12 +60,7 @@ export class Pager {
   }
 
   set current(v: number) {
-    if (v > this.count || v < 1) {
-      console.warn(`[Pager Warn] class Pager.current not over value ${v}.`)
-    }
-    v = Math.min(this.count, v)
-    v = Math.max(1, v)
-    this._current = v
+    this.jump(v)
   }
 
   get count(): number {
@@ -54,6 +71,10 @@ export class Pager {
     return this._viewCount
   }
 
+  set viewCount(v: number) {
+    this._viewCount = v
+  }
+
   get pages(): number[] {
     return makerArray(1, this.count)
   }
@@ -93,4 +114,32 @@ export class Pager {
   catOut(start: number, end: number): number[] {
     return this.pages.slice(Math.max(start - 1, 0), Math.min(end, this.count))
   }
+
+  jump(v: number): void {
+    if (v > this.count || v < 1) {
+      console.warn(`[Pager Warn] class Pager.current not over value ${v}.`)
+    }
+    v = Math.min(this.count, v)
+    v = Math.max(1, v)
+    this._current = v
+    this._event.emit(PagerEventType.CHANGE, v)
+  }
+
+  prev(): void {
+    this.jump(this._current - 1)
+    this._event.emit(PagerEventType.PREV, this._current)
+  }
+
+  next(): void {
+    this.jump(this._current + 1)
+    this._event.emit(PagerEventType.NEXT, this._current)
+  }
+
+  on(type: PagerEventType, cb: PagerEventCb): void {
+    this._event.on(type, cb)
+  }
+
+  changeSize(v: number): void {
+    this._size = v
+  }
 }
diff --git a/packages/element3/src/components/Pagination/src/parts/Next.vue b/packages/element3/src/components/Pagination/src/parts/Next.vue
index 34252089d..558a6c4e9 100644
--- a/packages/element3/src/components/Pagination/src/parts/Next.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Next.vue
@@ -1,5 +1,16 @@
 <template>
-  <button type="button" class="btn-next">
+  <button type="button" class="btn-next" @click="pager.next()">
     <i class="el-icon el-icon-arrow-right"></i>
   </button>
 </template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Pager } from '../entity/Pager'
+
+export default defineComponent({
+  props: {
+    pager: Pager
+  }
+})
+</script>
diff --git a/packages/element3/src/components/Pagination/src/parts/Pager.vue b/packages/element3/src/components/Pagination/src/parts/Pager.vue
index a2ae68da8..af372c9bb 100644
--- a/packages/element3/src/components/Pagination/src/parts/Pager.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Pager.vue
@@ -10,18 +10,8 @@
     <li
       v-if="pager.count > pager.viewCount && pager.leftCount > pager.halfPager"
       class="el-icon more btn-quickprev el-icon-more"
-      @mouseenter="
-        switchClass($event.target, true, [
-          'el-icon-d-arrow-left',
-          'el-icon-more'
-        ])
-      "
-      @mouseleave="
-        switchClass($event.target, false, [
-          'el-icon-d-arrow-left',
-          'el-icon-more'
-        ])
-      "
+      @mouseenter="switchLeft($event.target)"
+      @mouseleave="switchLeft($event.target)"
     ></li>
     <li
       v-for="page in pager.midViewPages"
@@ -35,18 +25,8 @@
     <li
       v-if="pager.count > pager.viewCount && pager.rightCount > pager.halfPager"
       class="el-icon more btn-quicknext el-icon-more"
-      @mouseenter="
-        switchClass($event.target, true, [
-          'el-icon-d-arrow-right',
-          'el-icon-more'
-        ])
-      "
-      @mouseleave="
-        switchClass($event.target, false, [
-          'el-icon-d-arrow-right',
-          'el-icon-more'
-        ])
-      "
+      @mouseenter="switchRight($event.target)"
+      @mouseleave="switchRight($event.target)"
     ></li>
     <li
       v-if="pager.count >= 2"
@@ -61,6 +41,7 @@
 
 <script lang="ts">
 import { Pager } from '../entity/Pager'
+import { switchClass } from '../tools/element'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
@@ -68,16 +49,9 @@ export default defineComponent({
     pager: Pager
   },
   setup() {
-    const switchClass = (el, flag, [a, b]) => {
-      if (flag) {
-        el.classList.add(a)
-        el.classList.remove(b)
-      } else {
-        el.classList.remove(a)
-        el.classList.add(b)
-      }
-    }
-    return { switchClass }
+    const switchLeft = switchClass(['el-icon-d-arrow-left', 'el-icon-more'])
+    const switchRight = switchClass(['el-icon-d-arrow-right', 'el-icon-more'])
+    return { switchLeft, switchRight }
   }
 })
 </script>
diff --git a/packages/element3/src/components/Pagination/src/parts/Prev.vue b/packages/element3/src/components/Pagination/src/parts/Prev.vue
index 7959fa812..21f29b5fe 100644
--- a/packages/element3/src/components/Pagination/src/parts/Prev.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Prev.vue
@@ -1,5 +1,16 @@
 <template>
-  <button type="button" class="btn-prev">
+  <button type="button" class="btn-prev" @click="pager.prev()">
     <i class="el-icon el-icon-arrow-left"></i>
   </button>
 </template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Pager } from '../entity/Pager'
+
+export default defineComponent({
+  props: {
+    pager: Pager
+  }
+})
+</script>
diff --git a/packages/element3/src/components/Pagination/src/tools/element.ts b/packages/element3/src/components/Pagination/src/tools/element.ts
new file mode 100644
index 000000000..c1b2c08d4
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/tools/element.ts
@@ -0,0 +1,12 @@
+type SwitchFun = (el: Element | EventTarget) => void
+export function switchClass([a, b]: [string, string]): SwitchFun {
+  return (el: Element) => {
+    if (!el.className.includes(a)) {
+      el.classList.add(a)
+      el.classList.remove(b)
+    } else {
+      el.classList.remove(a)
+      el.classList.add(b)
+    }
+  }
+}
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index b7537ed86..04b02034d 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -4,6 +4,7 @@ import Prev from '../src/parts/Prev.vue'
 import Next from '../src/parts/Next.vue'
 import Pager from '../src/parts/Pager.vue'
 import Total from '../src/parts/Total.vue'
+import { nextTick, ref } from 'vue'
 
 describe('Pagination.vue', () => {
   it('Realize layout prev,pager,next', () => {
@@ -65,4 +66,37 @@ describe('Pagination.vue', () => {
 
     expect(wrapper.findComponent(Pager).exists()).toBeFalsy()
   })
+
+  it('click prev/next button currentPage', async () => {
+    const currentPage = ref(2)
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'prev, next',
+        currentPage: (currentPage as unknown) as number,
+        pageCount: 10,
+        'onUpdate:currentPage': (v) => (currentPage.value = v)
+      }
+    })
+
+    await wrapper.findComponent(Prev).trigger('click')
+    expect(currentPage.value).toBe(1)
+    await wrapper.findComponent(Next).trigger('click')
+    expect(currentPage.value).toBe(2)
+  })
+
+  it('vModel currentPage', async () => {
+    const currentPage = ref(2)
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'pager',
+        currentPage: (currentPage as unknown) as number,
+        pageCount: 10,
+        'onUpdate:currentPage': (v) => (currentPage.value = v)
+      }
+    })
+
+    currentPage.value = 3
+    await nextTick()
+    expect(wrapper.find('.active').text()).toBe('3')
+  })
 })
diff --git a/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts b/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts
index 18ae58df4..0b3737ba9 100644
--- a/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts
@@ -1,4 +1,4 @@
-import { Pager } from '../../src/entity/Pager'
+import { Pager, PagerEventType } from '../../src/entity/Pager'
 
 describe('Pager.ts', () => {
   it('instance Pager', () => {
@@ -142,4 +142,88 @@ describe('Pager.ts', () => {
 
     expect(pager.count).toBe(10)
   })
+
+  it('jump page', () => {
+    const pageCount = 6
+    const currentPage = 2
+    const pagerCount = 7
+    const pager = new Pager({
+      total: pageCount,
+      size: 1,
+      current: currentPage,
+      viewCount: pagerCount
+    })
+
+    pager.jump(5)
+    expect(pager.current).toBe(5)
+  })
+
+  it('jump page when currentPage Crossing the line', () => {
+    const pageCount = 6
+    const currentPage = 2
+    const pagerCount = 7
+    const pager = new Pager({
+      total: pageCount,
+      size: 1,
+      current: currentPage,
+      viewCount: pagerCount
+    })
+
+    pager.jump(7)
+    expect(pager.current).toBe(6)
+    pager.jump(0)
+    expect(pager.current).toBe(1)
+  })
+
+  it('change prev/next page', () => {
+    const pageCount = 6
+    const currentPage = 2
+    const pagerCount = 7
+    const pager = new Pager({
+      total: pageCount,
+      size: 1,
+      current: currentPage,
+      viewCount: pagerCount
+    })
+
+    pager.prev()
+    expect(pager.current).toBe(1)
+    pager.next()
+    expect(pager.current).toBe(2)
+  })
+
+  it('when current change, trigger event', () => {
+    const changeHandler = jest.fn()
+    const prevHandler = jest.fn()
+    const nextHandler = jest.fn()
+
+    const pageCount = 6
+    const currentPage = 2
+    const pagerCount = 7
+    const pager = new Pager({
+      total: pageCount,
+      size: 1,
+      current: currentPage,
+      viewCount: pagerCount
+    })
+
+    pager.on(PagerEventType.CHANGE, changeHandler)
+    pager.on(PagerEventType.PREV, prevHandler)
+    pager.on(PagerEventType.NEXT, nextHandler)
+
+    pager.jump(5)
+    pager.prev()
+    pager.next()
+
+    expect(changeHandler).toBeCalledTimes(3)
+    expect(changeHandler).toHaveBeenNthCalledWith(1, 5)
+    expect(changeHandler).toHaveBeenNthCalledWith(2, 4)
+    expect(changeHandler).toHaveBeenNthCalledWith(3, 5)
+
+    expect(prevHandler).toBeCalledTimes(1)
+    expect(prevHandler).toHaveBeenNthCalledWith(1, 4)
+
+    expect(nextHandler).toBeCalledTimes(1)
+    expect(nextHandler).toHaveBeenNthCalledWith(1, 5)
+  })
 })
diff --git a/packages/element3/src/components/Pagination/tests/tools/element.spec.ts b/packages/element3/src/components/Pagination/tests/tools/element.spec.ts
new file mode 100644
index 000000000..61decbdc1
--- /dev/null
+++ b/packages/element3/src/components/Pagination/tests/tools/element.spec.ts
@@ -0,0 +1,14 @@
+import { switchClass } from '../../src/tools/element'
+
+describe('element.ts', () => {
+  it('switch tow class state', () => {
+    const element = document.createElement('div')
+    const switchTrigger = switchClass(['a', 'b'])
+
+    switchTrigger(element)
+    expect(element.className).toBe('a')
+
+    switchTrigger(element)
+    expect(element.className).toBe('b')
+  })
+})

From a9b055b21bb32db047460278dfecaead5fc5e3bb Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Thu, 4 Mar 2021 17:44:43 +0800
Subject: [PATCH 14/30] refactor(Pagination): size change

---
 .../components/Pagination/src/Pagination.vue  | 12 ++++++++++-
 .../components/Pagination/src/entity/Pager.ts |  4 +++-
 .../Pagination/tests/Pagination.spec.ts       | 20 +++++++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index a5b3b6440..a97e721c6 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -57,7 +57,13 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['update:currentPage', 'prev-click', 'next-click'],
+  emits: [
+    'update:currentPage',
+    'prev-click',
+    'next-click',
+    'size-change',
+    'update:pageSize'
+  ],
   components: {
     Pager,
     Prev,
@@ -108,6 +114,10 @@ function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
   pager.on(PagerEventType.NEXT, (v) => {
     emit('next-click', v)
   })
+  pager.on(PagerEventType.SIZE_CHANGE, (v) => {
+    emit('size-change', v)
+    emit('update:pageSize', v)
+  })
   if (total)
     watch(total, (v: number) => {
       pager.total = v
diff --git a/packages/element3/src/components/Pagination/src/entity/Pager.ts b/packages/element3/src/components/Pagination/src/entity/Pager.ts
index 2a192cc1e..4306d0985 100644
--- a/packages/element3/src/components/Pagination/src/entity/Pager.ts
+++ b/packages/element3/src/components/Pagination/src/entity/Pager.ts
@@ -4,7 +4,8 @@ import { makerArray } from '../tools/makerArray'
 export enum PagerEventType {
   CHANGE = 'change',
   PREV = 'prev',
-  NEXT = 'next'
+  NEXT = 'next',
+  SIZE_CHANGE = 'size_change'
 }
 
 export type PagerEventCb = (pageNumber: number) => void
@@ -141,5 +142,6 @@ export class Pager {
 
   changeSize(v: number): void {
     this._size = v
+    this._event.emit(PagerEventType.SIZE_CHANGE, v)
   }
 }
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index 04b02034d..07b21023a 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -99,4 +99,24 @@ describe('Pagination.vue', () => {
     await nextTick()
     expect(wrapper.find('.active').text()).toBe('3')
   })
+
+  it('change size by ref', async () => {
+    const currentPage = ref(2)
+    const total = ref(100)
+    const size = ref(10)
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'pager',
+        currentPage: (currentPage as unknown) as number,
+        total: (total as unknown) as number,
+        pageSize: (size as unknown) as number,
+        'onUpdate:currentPage': (v) => (currentPage.value = v)
+      }
+    })
+
+    expect(wrapper.vm.pager.count).toBe(10)
+    size.value = 20
+    await nextTick()
+    expect(wrapper.vm.pager.count).toBe(5)
+  })
 })

From 34d6103e9fa1a3486c98af0fdb4bb6c9e644abba Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Thu, 4 Mar 2021 17:58:55 +0800
Subject: [PATCH 15/30] refactor(Pagination): Implement pager paging

---
 .../components/Pagination/src/Pagination.vue  |  1 -
 .../components/Pagination/src/entity/Pager.ts |  8 ++++----
 .../components/Pagination/src/parts/Pager.vue |  5 +++++
 .../Pagination/tests/Pagination.spec.ts       | 19 +++++++++++++++++++
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index a97e721c6..933aa6a95 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -13,7 +13,6 @@ import {
   reactive,
   toRefs,
   watch,
-  watchEffect,
   Ref,
   getCurrentInstance
 } from 'vue'
diff --git a/packages/element3/src/components/Pagination/src/entity/Pager.ts b/packages/element3/src/components/Pagination/src/entity/Pager.ts
index 4306d0985..fcdc76ed0 100644
--- a/packages/element3/src/components/Pagination/src/entity/Pager.ts
+++ b/packages/element3/src/components/Pagination/src/entity/Pager.ts
@@ -126,13 +126,13 @@ export class Pager {
     this._event.emit(PagerEventType.CHANGE, v)
   }
 
-  prev(): void {
-    this.jump(this._current - 1)
+  prev(step = 1): void {
+    this.jump(this._current - step)
     this._event.emit(PagerEventType.PREV, this._current)
   }
 
-  next(): void {
-    this.jump(this._current + 1)
+  next(step = 1): void {
+    this.jump(this._current + step)
     this._event.emit(PagerEventType.NEXT, this._current)
   }
 
diff --git a/packages/element3/src/components/Pagination/src/parts/Pager.vue b/packages/element3/src/components/Pagination/src/parts/Pager.vue
index af372c9bb..eb15ec683 100644
--- a/packages/element3/src/components/Pagination/src/parts/Pager.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Pager.vue
@@ -4,6 +4,7 @@
       v-if="pager.count >= 1"
       class="number"
       :class="{ active: pager.current === 1 }"
+      @click="pager.jump(1)"
     >
       1
     </li>
@@ -12,6 +13,7 @@
       class="el-icon more btn-quickprev el-icon-more"
       @mouseenter="switchLeft($event.target)"
       @mouseleave="switchLeft($event.target)"
+      @click="pager.prev(pager.halfPager)"
     ></li>
     <li
       v-for="page in pager.midViewPages"
@@ -21,12 +23,14 @@
       :class="{
         active: pager.current === page
       }"
+      @click="pager.jump(page)"
     ></li>
     <li
       v-if="pager.count > pager.viewCount && pager.rightCount > pager.halfPager"
       class="el-icon more btn-quicknext el-icon-more"
       @mouseenter="switchRight($event.target)"
       @mouseleave="switchRight($event.target)"
+      @click="pager.next(pager.halfPager)"
     ></li>
     <li
       v-if="pager.count >= 2"
@@ -35,6 +39,7 @@
       :class="{
         active: pager.current === pager.count
       }"
+      @click="pager.jump(pager.count)"
     ></li>
   </ul>
 </template>
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index 07b21023a..ca297f978 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -119,4 +119,23 @@ describe('Pagination.vue', () => {
     await nextTick()
     expect(wrapper.vm.pager.count).toBe(5)
   })
+
+  it('click pager button currentPage', async () => {
+    const currentPage = ref(2)
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'pager',
+        currentPage: (currentPage as unknown) as number,
+        pageCount: 100,
+        'onUpdate:currentPage': (v) => (currentPage.value = v)
+      }
+    })
+    const pages = wrapper.findAll('.number')
+
+    await pages[0].trigger('click')
+    expect(currentPage.value).toBe(1)
+
+    await wrapper.find('.btn-quicknext').trigger('click')
+    expect(currentPage.value).toBe(4)
+  })
 })

From fdc830b830e901262fe559d4346968f7edbcdbaa Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Thu, 4 Mar 2021 18:11:55 +0800
Subject: [PATCH 16/30] refactor(Pagination): change hideOnSinglePage code

---
 packages/element3/src/components/Pagination/index.js       | 7 +++++++
 .../element3/src/components/Pagination/src/Pagination.vue  | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 packages/element3/src/components/Pagination/index.js

diff --git a/packages/element3/src/components/Pagination/index.js b/packages/element3/src/components/Pagination/index.js
new file mode 100644
index 000000000..10b050909
--- /dev/null
+++ b/packages/element3/src/components/Pagination/index.js
@@ -0,0 +1,7 @@
+import ElPagination from './src/Pagination.vue'
+
+ElPagination.install = function (app) {
+  app.component(ElPagination.name, ElPagination)
+}
+
+export { ElPagination }
diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index 933aa6a95..4fb472bcb 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="pager.count > 1" class="el-pagination">
+  <div v-if="!(hideOnSinglePage && pager.count <= 1)" class="el-pagination">
     <template v-for="(part, index) in layoutPart" :key="index">
       <component :is="part" :pager="pager"></component>
     </template>
@@ -49,7 +49,7 @@ export default defineComponent({
     },
     pageSize: {
       type: Number,
-      default: 1
+      default: 10
     },
     hideOnSinglePage: {
       type: Boolean,
@@ -99,7 +99,7 @@ function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
   const pager = reactive(
     new PagerCore({
       total: total?.value ?? pageCount.value,
-      size: pageSize.value,
+      size: total?.value ? pageSize.value : 1,
       viewCount: pagerCount.value,
       current: currentPage.value
     })

From a3b1f6193b2de7ed98271b7d49cb9512daff71fa Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Fri, 5 Mar 2021 17:26:48 +0800
Subject: [PATCH 17/30] refactor(Pagination): optimized code

---
 .../components/Pagination/src/Pagination.vue  | 72 +++++++++++--------
 1 file changed, 41 insertions(+), 31 deletions(-)

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index 4fb472bcb..672714131 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -95,7 +95,44 @@ export default defineComponent({
 })
 
 function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
+  const pagerEventHandler = (pager) => {
+    pager.on(PagerEventType.CHANGE, (v) => {
+      emit('update:currentPage', v)
+    })
+    pager.on(PagerEventType.PREV, (v) => {
+      emit('prev-click', v)
+    })
+    pager.on(PagerEventType.NEXT, (v) => {
+      emit('next-click', v)
+    })
+    pager.on(PagerEventType.SIZE_CHANGE, (v) => {
+      emit('size-change', v)
+      emit('update:pageSize', v)
+    })
+  }
+  const bindVariableHandler = (pager) => {
+    if (total)
+      watch(total, (v: number) => {
+        pager.total = v
+      })
+    if (pageCount)
+      watch(pageCount, (v: number) => {
+        pager.total = v
+        pager.changeSize(1)
+      })
+    watch(pagerCount, (v: number) => {
+      pager.viewCount = v
+    })
+    watch(pageSize, (v: number) => {
+      pager.size = v
+    })
+    watch(currentPage, (v: number) => {
+      pager.current = v
+    })
+  }
+
   const { emit } = getCurrentInstance()
+
   const pager = reactive(
     new PagerCore({
       total: total?.value ?? pageCount.value,
@@ -104,37 +141,10 @@ function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
       current: currentPage.value
     })
   )
-  pager.on(PagerEventType.CHANGE, (v) => {
-    emit('update:currentPage', v)
-  })
-  pager.on(PagerEventType.PREV, (v) => {
-    emit('prev-click', v)
-  })
-  pager.on(PagerEventType.NEXT, (v) => {
-    emit('next-click', v)
-  })
-  pager.on(PagerEventType.SIZE_CHANGE, (v) => {
-    emit('size-change', v)
-    emit('update:pageSize', v)
-  })
-  if (total)
-    watch(total, (v: number) => {
-      pager.total = v
-    })
-  if (pageCount)
-    watch(pageCount, (v: number) => {
-      pager.total = v
-      pager.changeSize(1)
-    })
-  watch(pagerCount, (v: number) => {
-    pager.viewCount = v
-  })
-  watch(pageSize, (v: number) => {
-    pager.size = v
-  })
-  watch(currentPage, (v: number) => {
-    pager.current = v
-  })
+
+  pagerEventHandler(pager)
+  bindVariableHandler(pager)
+
   return { pager }
 }
 

From 183c22788b85dcdbaf23ebbbc4dfd629613c25b0 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Fri, 5 Mar 2021 18:46:04 +0800
Subject: [PATCH 18/30] refactor(Pagination): Realize the control of the
 drop-down selection box

---
 .../components/Pagination/src/Pagination.vue  | 21 +++++++--
 .../components/Pagination/src/entity/Pager.ts | 13 ++++--
 .../components/Pagination/src/parts/Sizes.vue | 44 +++++++++++++++++++
 .../Pagination/tests/Pagination.spec.ts       | 22 ++++++++++
 .../Pagination/tests/entity/Pager.spec.ts     | 17 +++++++
 .../src/components/Pagination/types.ts        |  1 +
 6 files changed, 112 insertions(+), 6 deletions(-)
 create mode 100644 packages/element3/src/components/Pagination/src/parts/Sizes.vue

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index 4fb472bcb..cb03180a0 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -14,7 +14,9 @@ import {
   toRefs,
   watch,
   Ref,
-  getCurrentInstance
+  getCurrentInstance,
+  PropType,
+  watchEffect
 } from 'vue'
 import { ElPaginationProps } from '../types'
 import { Pager as PagerCore, PagerEventType } from './entity/Pager'
@@ -24,6 +26,7 @@ import Pager from './parts/Pager.vue'
 import Prev from './parts/Prev.vue'
 import Next from './parts/Next.vue'
 import Total from './parts/Total.vue'
+import Sizes from './parts/Sizes.vue'
 
 export default defineComponent({
   name: 'ElPagination',
@@ -36,7 +39,6 @@ export default defineComponent({
       type: Number,
       default: 7
     },
-
     currentPage: {
       type: Number,
       default: 1
@@ -54,6 +56,10 @@ export default defineComponent({
     hideOnSinglePage: {
       type: Boolean,
       default: false
+    },
+    pageSizes: {
+      type: Array as PropType<number[]>,
+      default: [10, 50, 100]
     }
   },
   emits: [
@@ -67,7 +73,8 @@ export default defineComponent({
     Pager,
     Prev,
     Next,
-    Total
+    Total,
+    Sizes
   },
   setup(props: ElPaginationProps) {
     const {
@@ -76,6 +83,7 @@ export default defineComponent({
       pageSize,
       pagerCount,
       pageCount,
+      pageSizes,
       layout
     } = toRefs(props)
     const { layoutPart } = useLayout(layout)
@@ -86,6 +94,7 @@ export default defineComponent({
       pagerCount,
       pageCount
     })
+    useSises({ pager, pageSizes })
 
     return {
       layoutPart,
@@ -138,6 +147,12 @@ function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
   return { pager }
 }
 
+function useSises({ pager, pageSizes }) {
+  watchEffect(() => {
+    pager.sizes = pageSizes.value
+  })
+}
+
 function useLayout(layout: Ref<string>) {
   const layoutPart = computed(() => parseLayout(layout.value))
   return {
diff --git a/packages/element3/src/components/Pagination/src/entity/Pager.ts b/packages/element3/src/components/Pagination/src/entity/Pager.ts
index fcdc76ed0..ab5053d18 100644
--- a/packages/element3/src/components/Pagination/src/entity/Pager.ts
+++ b/packages/element3/src/components/Pagination/src/entity/Pager.ts
@@ -23,6 +23,15 @@ export class Pager {
   private _size: number
   private _viewCount: number
   private _event = mitt()
+  private _sizes = []
+
+  get sizes(): number[] {
+    return this._sizes
+  }
+
+  set sizes(v: number[]) {
+    this._sizes = v
+  }
 
   get size(): number {
     return this._size
@@ -117,9 +126,6 @@ export class Pager {
   }
 
   jump(v: number): void {
-    if (v > this.count || v < 1) {
-      console.warn(`[Pager Warn] class Pager.current not over value ${v}.`)
-    }
     v = Math.min(this.count, v)
     v = Math.max(1, v)
     this._current = v
@@ -143,5 +149,6 @@ export class Pager {
   changeSize(v: number): void {
     this._size = v
     this._event.emit(PagerEventType.SIZE_CHANGE, v)
+    this.jump(this._current)
   }
 }
diff --git a/packages/element3/src/components/Pagination/src/parts/Sizes.vue b/packages/element3/src/components/Pagination/src/parts/Sizes.vue
new file mode 100644
index 000000000..671fb9684
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/parts/Sizes.vue
@@ -0,0 +1,44 @@
+<template>
+  <span class="el-pagination__sizes">
+    <el-select
+      :modelValue="pager.size"
+      @update:modelValue="pager.changeSize($event)"
+    >
+      <el-option
+        v-for="item in pager.sizes"
+        :value="item"
+        :label="item + t('el.pagination.pagesize')"
+        :key="item"
+      >
+      </el-option>
+    </el-select>
+  </span>
+</template>
+
+<script lang="ts">
+import ElSelect from '../../../../../packages/select'
+import ElOption from '../../../../../packages/option'
+import { useLocale } from '../../../../composables/locale'
+import { Pager } from '../entity/Pager'
+
+export default {
+  components: {
+    ElSelect,
+    ElOption
+  },
+
+  props: {
+    pager: Pager
+  },
+
+  setup() {
+    const t = useLocale()
+
+    return {
+      t
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index ca297f978..a3c8a3498 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -138,4 +138,26 @@ describe('Pagination.vue', () => {
     await wrapper.find('.btn-quicknext').trigger('click')
     expect(currentPage.value).toBe(4)
   })
+
+  it('click test sizes change pageSize', () => {
+    const currentPage = ref(2)
+    const total = ref(100)
+    const size = ref(10)
+
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'sizes',
+        currentPage: (currentPage as unknown) as number,
+        total: (total as unknown) as number,
+        pageSize: (size as unknown) as number,
+        pageSizes: [10, 20, 30],
+        'onUpdate:currentPage': (v) => (currentPage.value = v),
+        'onUpdate:pageSize': (v) => (size.value = v)
+      }
+    })
+
+    wrapper.vm.pager.size = 20
+
+    expect(wrapper.vm.pager.count).toBe(5)
+  })
 })
diff --git a/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts b/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts
index 0b3737ba9..29828c62c 100644
--- a/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/entity/Pager.spec.ts
@@ -226,4 +226,21 @@ describe('Pager.ts', () => {
     expect(nextHandler).toBeCalledTimes(1)
     expect(nextHandler).toHaveBeenNthCalledWith(1, 5)
   })
+
+  it('update size', () => {
+    const sizeHandler = jest.fn()
+
+    const pager = new Pager({
+      total: 100,
+      size: 1,
+      current: 90,
+      viewCount: 7
+    })
+
+    pager.on(PagerEventType.SIZE_CHANGE, sizeHandler)
+    pager.size = 10
+    expect(sizeHandler).toBeCalledTimes(1)
+    expect(sizeHandler).toHaveBeenNthCalledWith(1, 10)
+    expect(pager.current).toBe(10)
+  })
 })
diff --git a/packages/element3/src/components/Pagination/types.ts b/packages/element3/src/components/Pagination/types.ts
index 39e585235..7e82550b1 100644
--- a/packages/element3/src/components/Pagination/types.ts
+++ b/packages/element3/src/components/Pagination/types.ts
@@ -6,6 +6,7 @@ export interface ElPaginationProps {
   total?: number
   pageSize?: number
   hideOnSinglePage?: boolean
+  pageSizes?: number[]
 }
 
 declare class ElPagination {

From cddb878da77434e1d0bcc4abcc2a9d24cd91b1b2 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Sat, 6 Mar 2021 15:51:37 +0800
Subject: [PATCH 19/30] refactor(Pagination): Based on popper-class to achieve
 drop-down style control

---
 .../components/Pagination/src/Pagination.vue  | 15 +++++++++++++
 .../components/Pagination/src/entity/Pager.ts | 15 +++++++++++++
 .../components/Pagination/src/parts/Sizes.vue |  1 +
 .../Pagination/tests/Pagination.spec.ts       | 21 +++++++++++++++++++
 .../src/components/Pagination/types.ts        |  1 +
 5 files changed, 53 insertions(+)

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index cb03180a0..77e4ba76d 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -60,6 +60,10 @@ export default defineComponent({
     pageSizes: {
       type: Array as PropType<number[]>,
       default: [10, 50, 100]
+    },
+    popperClass: {
+      type: String,
+      default: ''
     }
   },
   emits: [
@@ -84,6 +88,7 @@ export default defineComponent({
       pagerCount,
       pageCount,
       pageSizes,
+      popperClass,
       layout
     } = toRefs(props)
     const { layoutPart } = useLayout(layout)
@@ -95,6 +100,7 @@ export default defineComponent({
       pageCount
     })
     useSises({ pager, pageSizes })
+    useStyle({ pager, popperClass })
 
     return {
       layoutPart,
@@ -144,9 +150,18 @@ function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
   watch(currentPage, (v: number) => {
     pager.current = v
   })
+
   return { pager }
 }
 
+function useStyle({ pager, popperClass }) {
+  watchEffect(() => {
+    pager.style = {
+      popperClass: popperClass.value
+    }
+  })
+}
+
 function useSises({ pager, pageSizes }) {
   watchEffect(() => {
     pager.sizes = pageSizes.value
diff --git a/packages/element3/src/components/Pagination/src/entity/Pager.ts b/packages/element3/src/components/Pagination/src/entity/Pager.ts
index ab5053d18..88df1a894 100644
--- a/packages/element3/src/components/Pagination/src/entity/Pager.ts
+++ b/packages/element3/src/components/Pagination/src/entity/Pager.ts
@@ -17,6 +17,10 @@ export interface PagerParam {
   viewCount: number
 }
 
+export interface PagerStyle {
+  popperClass?: string
+}
+
 export class Pager {
   private _current: number
   private _total: number
@@ -24,6 +28,17 @@ export class Pager {
   private _viewCount: number
   private _event = mitt()
   private _sizes = []
+  private _style: PagerStyle = {
+    popperClass: ''
+  }
+
+  get style(): PagerStyle {
+    return this._style
+  }
+
+  set style(v: PagerStyle) {
+    this._style = v
+  }
 
   get sizes(): number[] {
     return this._sizes
diff --git a/packages/element3/src/components/Pagination/src/parts/Sizes.vue b/packages/element3/src/components/Pagination/src/parts/Sizes.vue
index 671fb9684..f37dc6b13 100644
--- a/packages/element3/src/components/Pagination/src/parts/Sizes.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Sizes.vue
@@ -2,6 +2,7 @@
   <span class="el-pagination__sizes">
     <el-select
       :modelValue="pager.size"
+      :popperClass="pager.style.popperClass"
       @update:modelValue="pager.changeSize($event)"
     >
       <el-option
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index a3c8a3498..f29ecc5b6 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -160,4 +160,25 @@ describe('Pagination.vue', () => {
 
     expect(wrapper.vm.pager.count).toBe(5)
   })
+
+  it('sizes part popperClass', () => {
+    const currentPage = ref(2)
+    const total = ref(100)
+    const size = ref(10)
+
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'sizes',
+        currentPage: (currentPage as unknown) as number,
+        total: (total as unknown) as number,
+        pageSize: (size as unknown) as number,
+        pageSizes: [10, 20, 30],
+        popperClass: 'test',
+        'onUpdate:currentPage': (v) => (currentPage.value = v),
+        'onUpdate:pageSize': (v) => (size.value = v)
+      }
+    })
+
+    expect(wrapper.find('.test').exists()).toBeTruthy()
+  })
 })
diff --git a/packages/element3/src/components/Pagination/types.ts b/packages/element3/src/components/Pagination/types.ts
index 7e82550b1..3a71858f8 100644
--- a/packages/element3/src/components/Pagination/types.ts
+++ b/packages/element3/src/components/Pagination/types.ts
@@ -7,6 +7,7 @@ export interface ElPaginationProps {
   pageSize?: number
   hideOnSinglePage?: boolean
   pageSizes?: number[]
+  popperClass?: string
 }
 
 declare class ElPagination {

From 6be64b5572d6594d2dbaa4d3db7cfc2aabd9cc48 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Sat, 6 Mar 2021 16:14:30 +0800
Subject: [PATCH 20/30] refactor(Pagination): change el-select size

---
 packages/element3/src/components/Pagination/src/parts/Sizes.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/element3/src/components/Pagination/src/parts/Sizes.vue b/packages/element3/src/components/Pagination/src/parts/Sizes.vue
index f37dc6b13..84bd31d91 100644
--- a/packages/element3/src/components/Pagination/src/parts/Sizes.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Sizes.vue
@@ -4,6 +4,7 @@
       :modelValue="pager.size"
       :popperClass="pager.style.popperClass"
       @update:modelValue="pager.changeSize($event)"
+      :size="'mini'"
     >
       <el-option
         v-for="item in pager.sizes"

From a8c183b85a7cea5533180772c3948754f7ceae74 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Tue, 9 Mar 2021 18:25:37 +0800
Subject: [PATCH 21/30] refactor(Pagination): Based on layout-> to achieve
 custom layout alignment

---
 .../src/components/Pagination/src/Layout.vue  | 45 +++++++++++++++++++
 .../components/Pagination/src/Pagination.vue  | 33 ++++++--------
 .../Pagination/src/tools/parseLayout.ts       | 17 ++++++-
 .../Pagination/tests/Pagination.spec.ts       | 17 +++++++
 .../tests/tools/parseLayout.spec.ts           |  6 +++
 5 files changed, 97 insertions(+), 21 deletions(-)
 create mode 100644 packages/element3/src/components/Pagination/src/Layout.vue

diff --git a/packages/element3/src/components/Pagination/src/Layout.vue b/packages/element3/src/components/Pagination/src/Layout.vue
new file mode 100644
index 000000000..577b4cc68
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/Layout.vue
@@ -0,0 +1,45 @@
+<template>
+  <template v-for="(part, index) in layoutParts">
+    <template v-if="typeof part === 'string'">
+      <component :key="index" :is="part" :pager="pager"></component>
+    </template>
+    <template v-else>
+      <div class="el-pagination__rightwrapper" :key="index">
+        <layout :layout-parts="part"></layout>
+      </div>
+    </template>
+  </template>
+</template>
+
+<script lang="ts">
+import { inject } from 'vue'
+
+import Pager from './parts/Pager.vue'
+import Prev from './parts/Prev.vue'
+import Next from './parts/Next.vue'
+import Total from './parts/Total.vue'
+import Sizes from './parts/Sizes.vue'
+
+import { Pager as PagerCore } from './entity/Pager'
+
+export default {
+  name: 'Layout',
+  props: {
+    layoutParts: Array
+  },
+  components: {
+    Pager,
+    Total,
+    Next,
+    Prev,
+    Sizes
+  },
+  setup() {
+    const pager = inject<PagerCore>('pagination/pager')
+
+    return {
+      pager
+    }
+  }
+}
+</script>
diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index 5429bbac6..41633a7ad 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -1,8 +1,6 @@
 <template>
   <div v-if="!(hideOnSinglePage && pager.count <= 1)" class="el-pagination">
-    <template v-for="(part, index) in layoutPart" :key="index">
-      <component :is="part" :pager="pager"></component>
-    </template>
+    <layout-part :layout-parts="layoutParts"></layout-part>
   </div>
 </template>
 
@@ -16,24 +14,21 @@ import {
   Ref,
   getCurrentInstance,
   PropType,
-  watchEffect
+  watchEffect,
+  provide
 } from 'vue'
 import { ElPaginationProps } from '../types'
 import { Pager as PagerCore, PagerEventType } from './entity/Pager'
 import { parseLayout } from './tools/parseLayout'
 
-import Pager from './parts/Pager.vue'
-import Prev from './parts/Prev.vue'
-import Next from './parts/Next.vue'
-import Total from './parts/Total.vue'
-import Sizes from './parts/Sizes.vue'
+import LayoutPart from './Layout.vue'
 
 export default defineComponent({
   name: 'ElPagination',
   props: {
     layout: {
       type: String,
-      default: 'prev, pager, next, jumper, total'
+      default: 'prev, pager, next, jumper, ->, total'
     },
     pagerCount: {
       type: Number,
@@ -74,11 +69,7 @@ export default defineComponent({
     'update:pageSize'
   ],
   components: {
-    Pager,
-    Prev,
-    Next,
-    Total,
-    Sizes
+    LayoutPart
   },
   setup(props: ElPaginationProps) {
     const {
@@ -91,7 +82,7 @@ export default defineComponent({
       popperClass,
       layout
     } = toRefs(props)
-    const { layoutPart } = useLayout(layout)
+    const { layoutParts } = useLayout(layout)
     const { pager } = usePager({
       currentPage,
       total,
@@ -103,8 +94,8 @@ export default defineComponent({
     useStyle({ pager, popperClass })
 
     return {
-      layoutPart,
-      pager
+      pager,
+      layoutParts
     }
   }
 })
@@ -160,6 +151,8 @@ function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
   pagerEventHandler(pager)
   bindVariableHandler(pager)
 
+  provide('pagination/pager', pager)
+
   return { pager }
 }
 
@@ -178,9 +171,9 @@ function useSises({ pager, pageSizes }) {
 }
 
 function useLayout(layout: Ref<string>) {
-  const layoutPart = computed(() => parseLayout(layout.value))
+  const layoutParts = computed(() => parseLayout(layout.value))
   return {
-    layoutPart
+    layoutParts
   }
 }
 </script>
diff --git a/packages/element3/src/components/Pagination/src/tools/parseLayout.ts b/packages/element3/src/components/Pagination/src/tools/parseLayout.ts
index b8f91757f..dc1b4778c 100644
--- a/packages/element3/src/components/Pagination/src/tools/parseLayout.ts
+++ b/packages/element3/src/components/Pagination/src/tools/parseLayout.ts
@@ -1,3 +1,18 @@
 export function parseLayout(layout: string): string[] {
-  return layout.split(',').map((v) => v.trim())
+  const recursion = (arr: string[], index: number): string[] => {
+    const result = []
+    for (let i = index; i < arr.length; i++) {
+      const item = arr[i]
+      if (item === '->') {
+        result.push(recursion(arr, i + 1))
+        break
+      }
+      result.push(item)
+    }
+    return result
+  }
+  return recursion(
+    layout.split(',').map((item) => item.trim()),
+    0
+  )
 }
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index f29ecc5b6..6d1f6b0d4 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -181,4 +181,21 @@ describe('Pagination.vue', () => {
 
     expect(wrapper.find('.test').exists()).toBeTruthy()
   })
+
+  it('Achieve right-aligned layout', () => {
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'prev, pager, next, ->, total',
+        currentPage: 2,
+        pageCount: 5
+      }
+    })
+
+    expect(wrapper.find('.btn-prev').exists()).toBeTruthy()
+    expect(wrapper.findAll('.el-pager .number')).toHaveLength(5)
+    expect(wrapper.find('.el-pager .number.active').text()).toBe('2')
+    expect(wrapper.find('.btn-next').exists()).toBeTruthy()
+    expect(wrapper.find('.el-pagination__rightwrapper').exists()).toBeTruthy()
+    expect(wrapper.find('.el-pagination__total').exists()).toBeTruthy()
+  })
 })
diff --git a/packages/element3/src/components/Pagination/tests/tools/parseLayout.spec.ts b/packages/element3/src/components/Pagination/tests/tools/parseLayout.spec.ts
index 029db225f..5f9782bb9 100644
--- a/packages/element3/src/components/Pagination/tests/tools/parseLayout.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/tools/parseLayout.spec.ts
@@ -4,4 +4,10 @@ describe('parseLayout.ts', () => {
   it('parse a layout string', () => {
     expect(parseLayout('prev, pager, next ')).toEqual(['prev', 'pager', 'next'])
   })
+
+  it('parse -> flag', () => {
+    const layoutStr = 'prev, pager, next, -> , jumper, ->, total'
+    const result = parseLayout(layoutStr)
+    expect(result).toEqual(['prev', 'pager', 'next', ['jumper', ['total']]])
+  })
 })

From 878128a18cf6607cbce058b014e8f43ae7e5e3a7 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Tue, 9 Mar 2021 18:47:35 +0800
Subject: [PATCH 22/30] refactor(Pagination): Customize slots based on #default

---
 .../src/components/Pagination/src/Layout.vue  |  4 ++-
 .../components/Pagination/src/Pagination.vue  |  2 ++
 .../components/Pagination/src/parts/Slot.vue  | 15 +++++++++++
 .../Pagination/tests/Pagination.spec.ts       | 26 ++++++++++++++++++-
 4 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 packages/element3/src/components/Pagination/src/parts/Slot.vue

diff --git a/packages/element3/src/components/Pagination/src/Layout.vue b/packages/element3/src/components/Pagination/src/Layout.vue
index 577b4cc68..261ff955c 100644
--- a/packages/element3/src/components/Pagination/src/Layout.vue
+++ b/packages/element3/src/components/Pagination/src/Layout.vue
@@ -19,6 +19,7 @@ import Prev from './parts/Prev.vue'
 import Next from './parts/Next.vue'
 import Total from './parts/Total.vue'
 import Sizes from './parts/Sizes.vue'
+import Slot from './parts/Slot.vue'
 
 import { Pager as PagerCore } from './entity/Pager'
 
@@ -32,7 +33,8 @@ export default {
     Total,
     Next,
     Prev,
-    Sizes
+    Sizes,
+    Slot
   },
   setup() {
     const pager = inject<PagerCore>('pagination/pager')
diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index 41633a7ad..654c52dd4 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -171,7 +171,9 @@ function useSises({ pager, pageSizes }) {
 }
 
 function useLayout(layout: Ref<string>) {
+  const instance = getCurrentInstance()
   const layoutParts = computed(() => parseLayout(layout.value))
+  provide('pagination/slot/default', instance.slots.default)
   return {
     layoutParts
   }
diff --git a/packages/element3/src/components/Pagination/src/parts/Slot.vue b/packages/element3/src/components/Pagination/src/parts/Slot.vue
new file mode 100644
index 000000000..85aec3ecc
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/parts/Slot.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import { inject } from 'vue'
+import { Pager } from '../entity/Pager'
+export default {
+  props: {
+    pager: Pager
+  },
+  setup(props) {
+    const defaultSlotloader = inject<any>('pagination/slot/default')
+    return () => {
+      return defaultSlotloader && defaultSlotloader(props.pager)
+    }
+  }
+}
+</script>
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index 6d1f6b0d4..256206f2a 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -4,7 +4,7 @@ import Prev from '../src/parts/Prev.vue'
 import Next from '../src/parts/Next.vue'
 import Pager from '../src/parts/Pager.vue'
 import Total from '../src/parts/Total.vue'
-import { nextTick, ref } from 'vue'
+import { h, nextTick, ref } from 'vue'
 
 describe('Pagination.vue', () => {
   it('Realize layout prev,pager,next', () => {
@@ -198,4 +198,28 @@ describe('Pagination.vue', () => {
     expect(wrapper.find('.el-pagination__rightwrapper').exists()).toBeTruthy()
     expect(wrapper.find('.el-pagination__total').exists()).toBeTruthy()
   })
+
+  it('When layout is set to slot, customize slots based on #default', () => {
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'slot',
+        currentPage: 2,
+        pageCount: 5
+      },
+      slots: {
+        default(pager) {
+          return h(
+            'div',
+            {
+              class: 'slot'
+            },
+            'Current: ' + pager.current
+          )
+        }
+      }
+    })
+
+    expect(wrapper.find('.slot').exists()).toBeTruthy()
+    expect(wrapper.find('.slot').text()).toBe('Current: 2')
+  })
 })

From 5bd3857c99461f91331f42b71ff558089b737901 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Wed, 10 Mar 2021 13:49:31 +0800
Subject: [PATCH 23/30] refactor(Pagination): finish Customize Prev and Next
 content

---
 .../components/Pagination/src/Pagination.vue  | 20 +++++++++++++++----
 .../components/Pagination/src/entity/Pager.ts |  9 +++++----
 .../components/Pagination/src/parts/Next.vue  |  1 +
 .../components/Pagination/src/parts/Prev.vue  |  1 +
 .../Pagination/tests/Pagination.spec.ts       | 15 ++++++++++++++
 .../src/components/Pagination/types.ts        |  6 ++++++
 6 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index 654c52dd4..fd0dab72d 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -59,6 +59,14 @@ export default defineComponent({
     popperClass: {
       type: String,
       default: ''
+    },
+    nextText: {
+      type: String,
+      default: ''
+    },
+    prevText: {
+      type: String,
+      default: ''
     }
   },
   emits: [
@@ -80,7 +88,9 @@ export default defineComponent({
       pageCount,
       pageSizes,
       popperClass,
-      layout
+      layout,
+      nextText,
+      prevText
     } = toRefs(props)
     const { layoutParts } = useLayout(layout)
     const { pager } = usePager({
@@ -91,7 +101,7 @@ export default defineComponent({
       pageCount
     })
     useSises({ pager, pageSizes })
-    useStyle({ pager, popperClass })
+    useStyle({ pager, popperClass, nextText, prevText })
 
     return {
       pager,
@@ -156,10 +166,12 @@ function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
   return { pager }
 }
 
-function useStyle({ pager, popperClass }) {
+function useStyle({ pager, popperClass, nextText, prevText }) {
   watchEffect(() => {
     pager.style = {
-      popperClass: popperClass.value
+      popperClass: popperClass.value,
+      nextText: nextText.value,
+      prevText: prevText.value
     }
   })
 }
diff --git a/packages/element3/src/components/Pagination/src/entity/Pager.ts b/packages/element3/src/components/Pagination/src/entity/Pager.ts
index 88df1a894..a1d2276eb 100644
--- a/packages/element3/src/components/Pagination/src/entity/Pager.ts
+++ b/packages/element3/src/components/Pagination/src/entity/Pager.ts
@@ -1,4 +1,5 @@
 import mitt from 'mitt'
+import { ElPaginationProps, Keep } from '../../types'
 import { makerArray } from '../tools/makerArray'
 
 export enum PagerEventType {
@@ -17,9 +18,7 @@ export interface PagerParam {
   viewCount: number
 }
 
-export interface PagerStyle {
-  popperClass?: string
-}
+export type PagerStyle = Keep<'prevText' | 'nextText' | 'popperClass'>
 
 export class Pager {
   private _current: number
@@ -29,7 +28,9 @@ export class Pager {
   private _event = mitt()
   private _sizes = []
   private _style: PagerStyle = {
-    popperClass: ''
+    popperClass: '',
+    prevText: '',
+    nextText: ''
   }
 
   get style(): PagerStyle {
diff --git a/packages/element3/src/components/Pagination/src/parts/Next.vue b/packages/element3/src/components/Pagination/src/parts/Next.vue
index 558a6c4e9..b3ddb12f1 100644
--- a/packages/element3/src/components/Pagination/src/parts/Next.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Next.vue
@@ -1,6 +1,7 @@
 <template>
   <button type="button" class="btn-next" @click="pager.next()">
     <i class="el-icon el-icon-arrow-right"></i>
+    <span v-if="pager.style.nextText" v-text="pager.style.nextText"></span>
   </button>
 </template>
 
diff --git a/packages/element3/src/components/Pagination/src/parts/Prev.vue b/packages/element3/src/components/Pagination/src/parts/Prev.vue
index 21f29b5fe..1d38b0ffb 100644
--- a/packages/element3/src/components/Pagination/src/parts/Prev.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Prev.vue
@@ -1,6 +1,7 @@
 <template>
   <button type="button" class="btn-prev" @click="pager.prev()">
     <i class="el-icon el-icon-arrow-left"></i>
+    <span v-if="pager.style.prevText" v-text="pager.style.prevText"></span>
   </button>
 </template>
 
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index 256206f2a..e88d05fd5 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -222,4 +222,19 @@ describe('Pagination.vue', () => {
     expect(wrapper.find('.slot').exists()).toBeTruthy()
     expect(wrapper.find('.slot').text()).toBe('Current: 2')
   })
+
+  it('Customize Prev and Next content', () => {
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'prev, next',
+        currentPage: 2,
+        pageCount: 5,
+        prevText: 'PrevPage',
+        nextText: 'NextPage'
+      }
+    })
+
+    expect(wrapper.findComponent(Prev).text()).toBe('PrevPage')
+    expect(wrapper.findComponent(Next).text()).toBe('NextPage')
+  })
 })
diff --git a/packages/element3/src/components/Pagination/types.ts b/packages/element3/src/components/Pagination/types.ts
index 3a71858f8..2e70499cf 100644
--- a/packages/element3/src/components/Pagination/types.ts
+++ b/packages/element3/src/components/Pagination/types.ts
@@ -8,10 +8,16 @@ export interface ElPaginationProps {
   hideOnSinglePage?: boolean
   pageSizes?: number[]
   popperClass?: string
+  nextText?: string
+  prevText?: string
 }
 
 declare class ElPagination {
   $props: ElPaginationProps
 }
 
+export type Keep<S> = {
+  [key in keyof ElPaginationProps & S]?: ElPaginationProps[key]
+}
+
 export default ElPagination

From 50081949343d7b928bac6f541d4af8eea2ad319a Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Wed, 10 Mar 2021 14:46:10 +0800
Subject: [PATCH 24/30] refactor(Pagination): finish jumper part

---
 .../src/components/Pagination/src/Layout.vue  |  4 +-
 .../Pagination/src/parts/Jumper.vue           | 41 +++++++++++++++++++
 .../Pagination/tests/Pagination.spec.ts       | 17 ++++++++
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 packages/element3/src/components/Pagination/src/parts/Jumper.vue

diff --git a/packages/element3/src/components/Pagination/src/Layout.vue b/packages/element3/src/components/Pagination/src/Layout.vue
index 261ff955c..a814ab1af 100644
--- a/packages/element3/src/components/Pagination/src/Layout.vue
+++ b/packages/element3/src/components/Pagination/src/Layout.vue
@@ -20,6 +20,7 @@ import Next from './parts/Next.vue'
 import Total from './parts/Total.vue'
 import Sizes from './parts/Sizes.vue'
 import Slot from './parts/Slot.vue'
+import Jumper from './parts/Jumper.vue'
 
 import { Pager as PagerCore } from './entity/Pager'
 
@@ -34,7 +35,8 @@ export default {
     Next,
     Prev,
     Sizes,
-    Slot
+    Slot,
+    Jumper
   },
   setup() {
     const pager = inject<PagerCore>('pagination/pager')
diff --git a/packages/element3/src/components/Pagination/src/parts/Jumper.vue b/packages/element3/src/components/Pagination/src/parts/Jumper.vue
new file mode 100644
index 000000000..f15da85fb
--- /dev/null
+++ b/packages/element3/src/components/Pagination/src/parts/Jumper.vue
@@ -0,0 +1,41 @@
+<template>
+  <span class="el-pagination__jump">
+    {{ t('el.pagination.goto') }}
+    <el-input
+      v-model="model"
+      class="el-pagination__editor is-in-pagination"
+      :min="1"
+      :max="pager.count"
+      type="number"
+    />
+    {{ t('el.pagination.pageClassifier') }}
+  </span>
+</template>
+<script lang="ts">
+import { computed } from '@vue/runtime-core'
+import { ElInput } from '../../../../components/Input'
+import { useLocale } from '../../../../composables/locale'
+import { Pager } from '../entity/Pager'
+
+export default {
+  props: {
+    pager: Pager
+  },
+  components: { ElInput },
+  setup(props) {
+    const t = useLocale()
+    const model = computed({
+      get() {
+        return props.pager.current
+      },
+      set(v: number) {
+        props.pager.jump(v)
+      }
+    })
+    return {
+      model,
+      t
+    }
+  }
+}
+</script>
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index e88d05fd5..d986f2c4c 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -237,4 +237,21 @@ describe('Pagination.vue', () => {
     expect(wrapper.findComponent(Prev).text()).toBe('PrevPage')
     expect(wrapper.findComponent(Next).text()).toBe('NextPage')
   })
+
+  it('jump page number', async () => {
+    const currentPage = ref(1)
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'jumper',
+        currentPage: (currentPage as unknown) as number,
+        'onUpdate:currentPage': (v) => (currentPage.value = v),
+        pageCount: 5
+      }
+    })
+
+    const jumperInput = wrapper.find('input')
+    await jumperInput.setValue('5')
+
+    expect(currentPage.value).toBe(5)
+  })
 })

From 83db7d8757d85136f4fd6bde3aa259a0b57ad38d Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Wed, 10 Mar 2021 15:36:19 +0800
Subject: [PATCH 25/30] refactor(Pagination): finish disabled effect

---
 .../Pagination/tests/Pagination.spec.ts       | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index d986f2c4c..7e1fb3eb6 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -254,4 +254,29 @@ describe('Pagination.vue', () => {
 
     expect(currentPage.value).toBe(5)
   })
+
+  it('test disable effect', async () => {
+    const disabled = ref(false)
+    const currentPage = ref(1)
+    const wrapper = mount(Pagination, {
+      props: {
+        currentPage: (currentPage as unknown) as number,
+        pageCount: 5,
+        disabled: (disabled as unknown) as boolean,
+        'onUpdate:currentPage': (v) => (currentPage.value = v)
+      }
+    })
+
+    const [leftBtn, rightBtn] = wrapper.findAll('button')
+
+    expect(leftBtn.element.disabled).toBeTruthy()
+
+    currentPage.value = 5
+    await nextTick()
+    expect(rightBtn.element.disabled).toBeTruthy()
+
+    disabled.value = true
+    await nextTick()
+    expect(wrapper.vm.pager.style.disabled).toBeTruthy()
+  })
 })

From 7215e698e381ed2ea1b13c2c47840efec3b6406d Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Wed, 10 Mar 2021 15:40:57 +0800
Subject: [PATCH 26/30] refactor(Pagination): finish disabled effect

---
 .../src/components/Pagination/src/Pagination.vue    | 13 ++++++++-----
 .../src/components/Pagination/src/entity/Pager.ts   | 10 ++++++++--
 .../src/components/Pagination/src/parts/Jumper.vue  |  1 +
 .../src/components/Pagination/src/parts/Next.vue    |  7 ++++++-
 .../src/components/Pagination/src/parts/Pager.vue   | 10 +++++++---
 .../src/components/Pagination/src/parts/Prev.vue    |  7 ++++++-
 .../src/components/Pagination/src/parts/Sizes.vue   |  3 ++-
 .../src/components/Pagination/src/parts/Total.vue   |  8 +++++++-
 .../element3/src/components/Pagination/types.ts     |  1 +
 9 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index fd0dab72d..ad41943cf 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -67,7 +67,8 @@ export default defineComponent({
     prevText: {
       type: String,
       default: ''
-    }
+    },
+    disabled: Boolean
   },
   emits: [
     'update:currentPage',
@@ -90,7 +91,8 @@ export default defineComponent({
       popperClass,
       layout,
       nextText,
-      prevText
+      prevText,
+      disabled
     } = toRefs(props)
     const { layoutParts } = useLayout(layout)
     const { pager } = usePager({
@@ -101,7 +103,7 @@ export default defineComponent({
       pageCount
     })
     useSises({ pager, pageSizes })
-    useStyle({ pager, popperClass, nextText, prevText })
+    useStyle({ pager, popperClass, nextText, prevText, disabled })
 
     return {
       pager,
@@ -166,12 +168,13 @@ function usePager({ total, pageCount, pageSize, pagerCount, currentPage }) {
   return { pager }
 }
 
-function useStyle({ pager, popperClass, nextText, prevText }) {
+function useStyle({ pager, popperClass, nextText, prevText, disabled }) {
   watchEffect(() => {
     pager.style = {
       popperClass: popperClass.value,
       nextText: nextText.value,
-      prevText: prevText.value
+      prevText: prevText.value,
+      disabled: disabled.value
     }
   })
 }
diff --git a/packages/element3/src/components/Pagination/src/entity/Pager.ts b/packages/element3/src/components/Pagination/src/entity/Pager.ts
index a1d2276eb..3f46f0517 100644
--- a/packages/element3/src/components/Pagination/src/entity/Pager.ts
+++ b/packages/element3/src/components/Pagination/src/entity/Pager.ts
@@ -18,7 +18,9 @@ export interface PagerParam {
   viewCount: number
 }
 
-export type PagerStyle = Keep<'prevText' | 'nextText' | 'popperClass'>
+export type PagerStyle = Keep<
+  'prevText' | 'nextText' | 'popperClass' | 'disabled'
+>
 
 export class Pager {
   private _current: number
@@ -30,7 +32,8 @@ export class Pager {
   private _style: PagerStyle = {
     popperClass: '',
     prevText: '',
-    nextText: ''
+    nextText: '',
+    disabled: false
   }
 
   get style(): PagerStyle {
@@ -142,6 +145,9 @@ export class Pager {
   }
 
   jump(v: number): void {
+    if (this._style.disabled) {
+      return
+    }
     v = Math.min(this.count, v)
     v = Math.max(1, v)
     this._current = v
diff --git a/packages/element3/src/components/Pagination/src/parts/Jumper.vue b/packages/element3/src/components/Pagination/src/parts/Jumper.vue
index f15da85fb..e794fece5 100644
--- a/packages/element3/src/components/Pagination/src/parts/Jumper.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Jumper.vue
@@ -7,6 +7,7 @@
       :min="1"
       :max="pager.count"
       type="number"
+      :disbaled="pager.style.disabled"
     />
     {{ t('el.pagination.pageClassifier') }}
   </span>
diff --git a/packages/element3/src/components/Pagination/src/parts/Next.vue b/packages/element3/src/components/Pagination/src/parts/Next.vue
index b3ddb12f1..a3c40b4a6 100644
--- a/packages/element3/src/components/Pagination/src/parts/Next.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Next.vue
@@ -1,5 +1,10 @@
 <template>
-  <button type="button" class="btn-next" @click="pager.next()">
+  <button
+    type="button"
+    class="btn-next"
+    @click="pager.next()"
+    :disabled="!pager.rightCount || pager.style.disabled"
+  >
     <i class="el-icon el-icon-arrow-right"></i>
     <span v-if="pager.style.nextText" v-text="pager.style.nextText"></span>
   </button>
diff --git a/packages/element3/src/components/Pagination/src/parts/Pager.vue b/packages/element3/src/components/Pagination/src/parts/Pager.vue
index eb15ec683..d51f20582 100644
--- a/packages/element3/src/components/Pagination/src/parts/Pager.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Pager.vue
@@ -3,7 +3,7 @@
     <li
       v-if="pager.count >= 1"
       class="number"
-      :class="{ active: pager.current === 1 }"
+      :class="{ active: pager.current === 1, disabled: pager.style.disabled }"
       @click="pager.jump(1)"
     >
       1
@@ -11,6 +11,7 @@
     <li
       v-if="pager.count > pager.viewCount && pager.leftCount > pager.halfPager"
       class="el-icon more btn-quickprev el-icon-more"
+      :class="{ disabled: pager.style.disabled }"
       @mouseenter="switchLeft($event.target)"
       @mouseleave="switchLeft($event.target)"
       @click="pager.prev(pager.halfPager)"
@@ -21,13 +22,15 @@
       :key="page"
       class="number"
       :class="{
-        active: pager.current === page
+        active: pager.current === page,
+        disabled: pager.style.disabled
       }"
       @click="pager.jump(page)"
     ></li>
     <li
       v-if="pager.count > pager.viewCount && pager.rightCount > pager.halfPager"
       class="el-icon more btn-quicknext el-icon-more"
+      :class="{ disabled: pager.style.disabled }"
       @mouseenter="switchRight($event.target)"
       @mouseleave="switchRight($event.target)"
       @click="pager.next(pager.halfPager)"
@@ -37,7 +40,8 @@
       v-text="pager.count"
       class="number"
       :class="{
-        active: pager.current === pager.count
+        active: pager.current === pager.count,
+        disabled: pager.style.disabled
       }"
       @click="pager.jump(pager.count)"
     ></li>
diff --git a/packages/element3/src/components/Pagination/src/parts/Prev.vue b/packages/element3/src/components/Pagination/src/parts/Prev.vue
index 1d38b0ffb..0b1b4a304 100644
--- a/packages/element3/src/components/Pagination/src/parts/Prev.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Prev.vue
@@ -1,5 +1,10 @@
 <template>
-  <button type="button" class="btn-prev" @click="pager.prev()">
+  <button
+    type="button"
+    class="btn-prev"
+    @click="pager.prev()"
+    :disabled="!pager.leftCount || pager.style.disabled"
+  >
     <i class="el-icon el-icon-arrow-left"></i>
     <span v-if="pager.style.prevText" v-text="pager.style.prevText"></span>
   </button>
diff --git a/packages/element3/src/components/Pagination/src/parts/Sizes.vue b/packages/element3/src/components/Pagination/src/parts/Sizes.vue
index 84bd31d91..912c5ea06 100644
--- a/packages/element3/src/components/Pagination/src/parts/Sizes.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Sizes.vue
@@ -3,8 +3,9 @@
     <el-select
       :modelValue="pager.size"
       :popperClass="pager.style.popperClass"
-      @update:modelValue="pager.changeSize($event)"
       :size="'mini'"
+      :disabled="pager.style.disabled"
+      @update:modelValue="pager.changeSize($event)"
     >
       <el-option
         v-for="item in pager.sizes"
diff --git a/packages/element3/src/components/Pagination/src/parts/Total.vue b/packages/element3/src/components/Pagination/src/parts/Total.vue
index e47efb875..e5034cccd 100644
--- a/packages/element3/src/components/Pagination/src/parts/Total.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Total.vue
@@ -1,5 +1,11 @@
 <template>
-  <span class="el-pagination__total" v-text="`共 ${pager.total} 条`"></span>
+  <span
+    class="el-pagination__total"
+    :class="{
+      disabled: pager.style.disabled
+    }"
+    v-text="`共 ${pager.total} 条`"
+  ></span>
 </template>
 
 <script lang="ts">
diff --git a/packages/element3/src/components/Pagination/types.ts b/packages/element3/src/components/Pagination/types.ts
index 2e70499cf..371e45cd7 100644
--- a/packages/element3/src/components/Pagination/types.ts
+++ b/packages/element3/src/components/Pagination/types.ts
@@ -10,6 +10,7 @@ export interface ElPaginationProps {
   popperClass?: string
   nextText?: string
   prevText?: string
+  disabled?: boolean
 }
 
 declare class ElPagination {

From 50c48b22b62c93e957691e586bd38fa5e7645d00 Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Wed, 10 Mar 2021 15:50:09 +0800
Subject: [PATCH 27/30] refactor(Pagination): finish small style

---
 .../src/components/Pagination/src/Pagination.vue   | 11 +++++++++--
 .../components/Pagination/tests/Pagination.spec.ts | 14 ++++++++++++++
 .../element3/src/components/Pagination/types.ts    |  1 +
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index ad41943cf..b98b2ad29 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -1,5 +1,11 @@
 <template>
-  <div v-if="!(hideOnSinglePage && pager.count <= 1)" class="el-pagination">
+  <div
+    v-if="!(hideOnSinglePage && pager.count <= 1)"
+    class="el-pagination"
+    :class="{
+      'el-pagination--small': small
+    }"
+  >
     <layout-part :layout-parts="layoutParts"></layout-part>
   </div>
 </template>
@@ -68,7 +74,8 @@ export default defineComponent({
       type: String,
       default: ''
     },
-    disabled: Boolean
+    disabled: Boolean,
+    small: Boolean
   },
   emits: [
     'update:currentPage',
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index 7e1fb3eb6..8ed193578 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -279,4 +279,18 @@ describe('Pagination.vue', () => {
     await nextTick()
     expect(wrapper.vm.pager.style.disabled).toBeTruthy()
   })
+
+  it('small pager', () => {
+    const currentPage = ref(1)
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'pager',
+        currentPage: (currentPage as unknown) as number,
+        'onUpdate:currentPage': (v) => (currentPage.value = v),
+        pageCount: 5,
+        small: true
+      }
+    })
+    expect(wrapper.find('.el-pagination--small').exists()).toBeTruthy()
+  })
 })
diff --git a/packages/element3/src/components/Pagination/types.ts b/packages/element3/src/components/Pagination/types.ts
index 371e45cd7..7cee89f78 100644
--- a/packages/element3/src/components/Pagination/types.ts
+++ b/packages/element3/src/components/Pagination/types.ts
@@ -11,6 +11,7 @@ export interface ElPaginationProps {
   nextText?: string
   prevText?: string
   disabled?: boolean
+  small?: boolean
 }
 
 declare class ElPagination {

From b9dd922729bad56394b20c7188685f10fa97c40f Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Wed, 10 Mar 2021 15:54:08 +0800
Subject: [PATCH 28/30] refactor(Pagination): finish background effect

---
 .../src/components/Pagination/src/Pagination.vue   |  6 ++++--
 .../components/Pagination/tests/Pagination.spec.ts | 14 ++++++++++++++
 .../element3/src/components/Pagination/types.ts    |  1 +
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/element3/src/components/Pagination/src/Pagination.vue b/packages/element3/src/components/Pagination/src/Pagination.vue
index b98b2ad29..2042c6bd8 100644
--- a/packages/element3/src/components/Pagination/src/Pagination.vue
+++ b/packages/element3/src/components/Pagination/src/Pagination.vue
@@ -3,7 +3,8 @@
     v-if="!(hideOnSinglePage && pager.count <= 1)"
     class="el-pagination"
     :class="{
-      'el-pagination--small': small
+      'el-pagination--small': small,
+      'is-background': background
     }"
   >
     <layout-part :layout-parts="layoutParts"></layout-part>
@@ -75,7 +76,8 @@ export default defineComponent({
       default: ''
     },
     disabled: Boolean,
-    small: Boolean
+    small: Boolean,
+    background: Boolean
   },
   emits: [
     'update:currentPage',
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index 8ed193578..bc069f316 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -293,4 +293,18 @@ describe('Pagination.vue', () => {
     })
     expect(wrapper.find('.el-pagination--small').exists()).toBeTruthy()
   })
+
+  it('Pager with background', () => {
+    const currentPage = ref(1)
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'pager',
+        currentPage: (currentPage as unknown) as number,
+        'onUpdate:currentPage': (v) => (currentPage.value = v),
+        pageCount: 5,
+        background: true
+      }
+    })
+    expect(wrapper.find('.is-background').exists()).toBeTruthy()
+  })
 })
diff --git a/packages/element3/src/components/Pagination/types.ts b/packages/element3/src/components/Pagination/types.ts
index 7cee89f78..8f4d0791a 100644
--- a/packages/element3/src/components/Pagination/types.ts
+++ b/packages/element3/src/components/Pagination/types.ts
@@ -12,6 +12,7 @@ export interface ElPaginationProps {
   prevText?: string
   disabled?: boolean
   small?: boolean
+  background?: boolean
 }
 
 declare class ElPagination {

From f754a791a3146455ebd8e4cba2e06a602c37747c Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Wed, 10 Mar 2021 16:00:53 +0800
Subject: [PATCH 29/30] refactor(Pagination): export component

---
 packages/element3/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/element3/src/index.js b/packages/element3/src/index.js
index cb7532c22..35b3bc7b1 100644
--- a/packages/element3/src/index.js
+++ b/packages/element3/src/index.js
@@ -47,7 +47,7 @@ import { ElNewTableColumn } from '../src/components/TableColumn'
 import { ElTag } from './components/Tag'
 import { ElProgress } from './components/Progress'
 import ElTree from '../packages/tree'
-import ElPagination from '../packages/pagination'
+import { ElPagination } from './components/Pagination'
 import { ElBadge } from './components/Badge'
 import { ElAvatar } from './components/Avatar'
 // Notice

From 9c7ad34d0738027c407a8adc87dfd9c3613c6f9b Mon Sep 17 00:00:00 2001
From: WumaCoder <1829913225@qq.com>
Date: Wed, 10 Mar 2021 16:50:38 +0800
Subject: [PATCH 30/30] refactor(Pagination): fix jumper not update

---
 .../components/Pagination/src/parts/Jumper.vue    | 15 +++------------
 .../Pagination/tests/Pagination.spec.ts           | 15 +++++++++++++++
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/element3/src/components/Pagination/src/parts/Jumper.vue b/packages/element3/src/components/Pagination/src/parts/Jumper.vue
index e794fece5..aa615829c 100644
--- a/packages/element3/src/components/Pagination/src/parts/Jumper.vue
+++ b/packages/element3/src/components/Pagination/src/parts/Jumper.vue
@@ -2,18 +2,18 @@
   <span class="el-pagination__jump">
     {{ t('el.pagination.goto') }}
     <el-input
-      v-model="model"
+      :modelValue="pager.current"
       class="el-pagination__editor is-in-pagination"
       :min="1"
       :max="pager.count"
       type="number"
       :disbaled="pager.style.disabled"
+      @update:modelValue="pager.jump(Number($event))"
     />
     {{ t('el.pagination.pageClassifier') }}
   </span>
 </template>
 <script lang="ts">
-import { computed } from '@vue/runtime-core'
 import { ElInput } from '../../../../components/Input'
 import { useLocale } from '../../../../composables/locale'
 import { Pager } from '../entity/Pager'
@@ -23,18 +23,9 @@ export default {
     pager: Pager
   },
   components: { ElInput },
-  setup(props) {
+  setup() {
     const t = useLocale()
-    const model = computed({
-      get() {
-        return props.pager.current
-      },
-      set(v: number) {
-        props.pager.jump(v)
-      }
-    })
     return {
-      model,
       t
     }
   }
diff --git a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
index bc069f316..2c8f9d105 100644
--- a/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
+++ b/packages/element3/src/components/Pagination/tests/Pagination.spec.ts
@@ -307,4 +307,19 @@ describe('Pagination.vue', () => {
     })
     expect(wrapper.find('.is-background').exists()).toBeTruthy()
   })
+
+  it('When the page number changes, so does the Jumper', async () => {
+    const currentPage = ref(1)
+    const wrapper = mount(Pagination, {
+      props: {
+        layout: 'jumper, next',
+        currentPage: (currentPage as unknown) as number,
+        'onUpdate:currentPage': (v) => (currentPage.value = v),
+        pageCount: 5,
+        background: true
+      }
+    })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.find('input').element.value).toBe('2')
+  })
 })