Pagination: add background prop

examples/docs/en-US/pagination.md

@@ -73,6 +73,18 @@ If you have too much data to display in one page, use pagination.
 ```
 :::
 
+### Buttons with background color
+
+:::demo Set the `background` attribute and the buttons will have a background color.
+```html
+<el-pagination
+  background
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
 ### Small Pagination
 
 Use small pagination in the case of limited space.
@@ -199,6 +211,7 @@ Add more modules based on your scenario.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 | small              |   whether to use small pagination    | boolean |      —       | false |
+| background | whether the buttons have a background color | Boolean | — | false |
 | page-size              | item count of each page  | number |      —       | 10 |
 | total | total item count | number | — | — |
 | page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |

examples/docs/zh-CN/pagination.md

@@ -23,6 +23,18 @@
 ```
 :::
 
+### 带有背景色的分页
+
+:::demo 设置`background`属性可以为分页按钮添加背景色。
+```html
+<el-pagination
+  background
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
 ### 小型分页
 
 在空间有限的情况下，可以使用简单的小型分页。
@@ -199,6 +211,7 @@
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 | small | 是否使用小型分页样式 | Boolean | — | false |
+| background | 是否为分页按钮添加背景色 | Boolean | — | false |
 | page-size | 每页显示条目个数 | Number | — | 10 |
 | total | 总条目数 | Number | — | — |
 | page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — |

packages/pagination/src/pagination.js

@@ -40,7 +40,9 @@ export default {
 
     prevText: String,
 
-    nextText: String
+    nextText: String,
+
+    background: Boolean
   },
 
   data() {
@@ -51,7 +53,10 @@ export default {
   },
 
   render(h) {
-    let template = <div class='el-pagination'></div>;
+    let template = <div class={['el-pagination', {
+      'is-background': this.background,
+      'el-pagination--small': this.small
+    }] }></div>;
     const layout = this.layout || '';
     if (!layout) return;
     const TEMPLATE_MAP = {
@@ -67,10 +72,6 @@ export default {
     const rightWrapper = <div class="el-pagination__rightwrapper"></div>;
     let haveRightWrapper = false;
 
-    if (this.small) {
-      template.data.class += ' el-pagination--small';
-    }
-
     components.forEach(compo => {
       if (compo === '->') {
         haveRightWrapper = true;

packages/theme-chalk/src/pagination.scss

@@ -75,6 +75,7 @@
     .el-icon {
       display: block;
       font-size: 12px;
+      font-weight: bold;
     }
   }
 
@@ -162,6 +163,46 @@
       margin: 0;
     }
   }
+
+  @include when(background) {
+    .btn-prev,
+    .btn-next,
+    .el-pager li {
+      margin: 0 5px;
+      background-color: $--color-info-lighter;
+      color: $--color-text-regular;
+      min-width: 30px;
+      border-radius: 2px;
+    }
+
+    .btn-prev, .btn-next {
+      padding: 0;
+
+      &.disabled {
+        color: $--color-text-placeholder;
+      }
+    }
+
+    .el-pager li {
+      &:hover {
+        color: $--pagination-hover-fill;
+      }
+
+      &.active {
+        background-color: $--color-primary;
+        color: $--color-white;
+      }
+    }
+
+    &.el-pagination--small {
+      .btn-prev,
+      .btn-next,
+      .el-pager li {
+        margin: 0 3px;
+        min-width: 22px;
+      }
+    }
+  }
 }
 
 @include b(pager) {
@@ -173,8 +214,8 @@
   padding: 0;
   margin: 0;
 
-  .el-icon-more::before {
+  .more::before {
-    vertical-align: -4px;
+    line-height: 30px;
   }
 
   li {