feat：修改分页组件默认样式&增加props传值及emit事件

examples/docs/zh-CN/pagination.md

@@ -107,12 +107,13 @@
   <div class="block">
     <span class="demonstration">完整功能</span>
     <el-pagination
+      background
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="currentPage4"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
-      layout="total, sizes, prev, pager, next, jumper"
+      layout="total, prev, pager, next, sizes, jumper"
       :total="400">
     </el-pagination>
   </div>
@@ -185,6 +186,9 @@
 | next-text | 替代图标显示的下一页文字 | string | — | — |
 | disabled | 是否禁用 | boolean | — | false |
 | hide-on-single-page | 只有一页时是否隐藏 | boolean | — | - |
+| show-confirm-btn | 是否展示jumper后面的确定按钮 | boolean | — | false |
+| no-auth | 无权限 | boolean | — | false |
+| popper-append-to-body | 是否将弹出框插入至 body 元素 | boolean | — | false |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |
@@ -193,6 +197,7 @@
 | current-change | currentPage 改变时会触发 | 当前页 |
 | prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
 | next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
+| no-auth-change | 没有权限时触发 | 当前页 |
 
 ### Slot
 | name | 说明 |

examples/versions.json

@@ -1 +1 @@
-{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.9":"2.15"}
+{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.12-rc":"2.15"}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.15.9-rc",
+  "version": "2.15.12-rc",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

packages/pagination/src/pagination.js

@@ -54,7 +54,18 @@ export default {
 
     disabled: Boolean,
 
-    hideOnSinglePage: Boolean
+    hideOnSinglePage: Boolean,
+
+    popperAppendToBody: Boolean,
+
+    showConfirmBtn: {
+      type: Boolean,
+      default: false
+    },
+    noAuth: {
+      type: Boolean,
+      default: false
+    }
   },
 
   data() {
@@ -174,6 +185,7 @@ export default {
             <el-select
               value={ this.$parent.internalPageSize }
               popperClass={ this.$parent.popperClass || '' }
+              popper-append-to-body={ this.$parent.popperAppendToBody || false}
               size="mini"
               on-input={ this.handleChange }
               disabled={ this.$parent.disabled }>
@@ -197,6 +209,10 @@ export default {
 
       methods: {
         handleChange(val) {
+          if (this.$parent.noAuth) {
+            this.$parent.$emit('no-auth-change', val);
+            return;
+          }
           if (val !== this.$parent.internalPageSize) {
             this.$parent.internalPageSize = val = parseInt(val, 10);
             this.$parent.userChangePageSize = true;
@@ -237,9 +253,14 @@ export default {
           this.userInput = value;
         },
         handleChange(value) {
-          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
-          this.$parent.emitChange();
-          this.userInput = null;
+          if (this.$parent.noAuth) {
+            this.userInput = null;
+            this.$parent.$emit('no-auth-change', value);
+          } else {
+            this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
+            this.$parent.emitChange();
+            this.userInput = null;
+          }
         }
       },
 
@@ -258,6 +279,11 @@ export default {
               onInput={ this.handleInput }
               onChange={ this.handleChange }/>
             { this.t('el.pagination.pageClassifier') }
+            {
+              this.$parent.showConfirmBtn
+                ? <span class="el-pagination__confirm">确定</span>
+                : ''
+            }
           </span>
         );
       }

packages/theme-chalk/src/common/var.scss

@@ -17,7 +17,7 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
 /* Color
 -------------------------- */
 /// color|1|Brand Color|0
-$--color-primary: #409EFF !default;
+$--color-primary: #2cb7ca !default;
 /// color|1|Background Color|4
 $--color-white: #FFFFFF !default;
 /// color|1|Background Color|4
@@ -50,7 +50,7 @@ $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
 $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
 $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
 /// color|1|Font Color|2
-$--color-text-primary: #303133 !default;
+$--color-text-primary: #1d1d1d !default;
 /// color|1|Font Color|2
 $--color-text-regular: #606266 !default;
 /// color|1|Font Color|2
@@ -644,17 +644,19 @@ $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
 -------------------------- */
 /// fontSize||Font|1
 $--pagination-font-size: 13px !default;
+/// fontSize||Font|2
+$--pagination-font-size-default: 14px !default;
 /// color||Color|0
 $--pagination-background-color: $--color-white !default;
 /// color||Color|0
 $--pagination-font-color: $--color-text-primary !default;
-$--pagination-border-radius: 3px !default;
+$--pagination-border-radius: 2px !default;
 /// color||Color|0
 $--pagination-button-color: $--color-text-primary !default;
 /// height||Other|4
-$--pagination-button-width: 35.5px !default;
+$--pagination-button-width: 32px !default;
 /// height||Other|4
-$--pagination-button-height: 28px !default;
+$--pagination-button-height: 32px !default;
 /// color||Color|0
 $--pagination-button-disabled-color: $--color-text-placeholder !default;
 /// color||Color|0

packages/theme-chalk/src/pagination.scss

@@ -7,13 +7,13 @@
   white-space: nowrap;
   padding: 2px 5px;
   color: $--pagination-font-color;
-  font-weight: bold;
+  font-weight: 500;
   @include utils-clearfix;
 
   span:not([class*=suffix]),
   button {
     display: inline-block;
-    font-size: $--pagination-font-size;
+    font-size: $--pagination-font-size-default;
     min-width: $--pagination-button-width;
     height: $--pagination-button-height;
     line-height: $--pagination-button-height;
@@ -29,6 +29,7 @@
 
   // pagesize 的下拉 icon
   .el-input__suffix {
+    display: none;
     right: 0;
     transform: scale(.8);
   }
@@ -38,7 +39,7 @@
     margin: 0 5px;
 
     .el-input__inner {
-      padding-right: 25px;
+      padding: 0 15px;
       border-radius: $--pagination-border-radius;
     }
   }
@@ -130,13 +131,17 @@
   }
 
   @include e(sizes) {
-    margin: 0 10px 0 0;
+    margin: 0 6px 0 0;
     font-weight: normal;
-    color: $--color-text-regular;
+    color: $--color-text-primary;
 
     .el-input .el-input__inner {
-      font-size: $--pagination-font-size;
+      font-size: $--pagination-font-size-default;
       padding-left: 8px;
+      height: $--pagination-button-height;
+      line-height: $--pagination-button-height;
+      color: $--color-text-primary;
+      border: 1px solid #ECECEC;
 
       &:hover {
         border-color: $--pagination-hover-color;
@@ -147,17 +152,26 @@
   @include e(total) {
     margin-right: 10px;
     font-weight: normal;
-    color: $--color-text-regular;
+    color: $--color-text-primary;
   }
 
   @include e(jump) {
-    margin-left: 24px;
+    margin-left: 0;
     font-weight: normal;
-    color: $--color-text-regular;
+    color: $--color-text-primary;
 
     .el-input__inner {
       padding: 0 3px;
     }
+
+    .el-pagination__confirm{
+      margin: 0 0 0 8px;
+      padding: 0 8px;
+      height: $--pagination-button-height;
+      border: 1px solid #E0E0E0;
+      border-radius: 4px;
+      cursor: pointer;
+    }
   }
 
   @include e(rightwrapper) {
@@ -170,7 +184,7 @@
     height: $--pagination-button-height;
       
     text-align: center;
-    margin: 0 2px;
+    margin: 0 8px;
     box-sizing: border-box;
     border-radius: $--pagination-border-radius;
 
@@ -180,6 +194,7 @@
 
     &.el-input .el-input__inner {
       height: $--pagination-button-height;
+      border: 1px solid #ECECEC;
     }
 
     .el-input__inner::-webkit-inner-spin-button,
@@ -193,11 +208,12 @@
     .btn-prev,
     .btn-next,
     .el-pager li {
-      margin: 0 5px;
-      background-color: $--color-info-lighter;
-      color: $--color-text-regular;
-      min-width: 30px;
+      margin: 0 4px;
+      background-color: $--color-white;
+      color: $--color-text-primary;
+      min-width: 32px;
       border-radius: 2px;
+      border: 1px solid #ECECEC;
 
       &.disabled {
         color: $--color-text-placeholder;
@@ -248,11 +264,11 @@
   }
 
   li {
-    padding: 0 4px;
+    padding: 0 8px;
     background: $--pagination-background-color;
     vertical-align: top;
     display: inline-block;
-    font-size: $--pagination-font-size;
+    font-size: $--pagination-font-size-default;
     min-width: $--pagination-button-width;
     height: $--pagination-button-height;
     line-height: $--pagination-button-height;

src/index.js

@@ -210,7 +210,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.9-rc',
+  version: '2.15.12-rc',
   locale: locale.use,
   i18n: locale.i18n,
   install,

src/locale/lang/zh-CN.js

@@ -71,7 +71,7 @@ export default {
       noData: '暂无数据'
     },
     pagination: {
-      goto: '前往',
+      goto: '跳到',
       pagesize: '条/页',
       total: '共 {total} 条',
       pageClassifier: '页'