Merge pull request #381 from QingWei-Li/fix/demo-footer

Popover: add popperClass; Steps: update style prop

examples/components/footer.vue

@@ -11,7 +11,7 @@
           ref="weixin"
           placement="top"
           width="120"
-          class="footer-popover"
+          popper-class="footer-popover"
           trigger="hover">
           <div class="footer-popover-title">饿了么 UED</div>
           <img src="../assets/images/qrcode.png" alt="">
@@ -33,7 +33,7 @@
     width: 100%;
     z-index: 1000;
     margin-top: -120px;
-  
+
     * {
       word-spacing: 0;
     }
@@ -41,18 +41,18 @@
     .container {
       height: 100%;
     }
-    
+
     .footer-main {
       font-size: 0;
       padding-top: 40px;
       display: inline-block;
-      
+
       .footer-main-title {
         line-height: 1;
         font-size: 22px;
         margin: 0;
       }
-      
+
       .footer-main-link {
         display: inline-block;
         margin: 12px 18px 0 0;
@@ -66,34 +66,11 @@
         }
       }
     }
-  
+
     .footer-social {
       float: right;
       line-height: 120px;
-    
-      .footer-popover {
-        .el-popover {
-          padding: 0;
-          min-width: 120px;
-          line-height: normal;
-          box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);
-        }
 
-        .footer-popover-title {
-          border-bottom: solid 1px #eaeefb;
-          height: 30px;
-          line-height: 30px;
-          text-align: center;
-          color: #99a9bf;
-          background-color: #f8f9fe;
-        }
-        
-        img {
-          size: 100px;
-          margin: 10px;
-        }
-      }
-      
       .elementdoc {
         transition: .3s;
         display: inline-block;
@@ -108,7 +85,7 @@
            transform: scale(1.2);
         }
       }
-  
+
       .doc-icon-weixin {
         margin-right: 36px;
         &:hover {
@@ -124,4 +101,25 @@
       }
     }
   }
+
+  .footer-popover {
+    padding: 0;
+    min-width: 120px;
+    line-height: normal;
+    box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);
+
+    .footer-popover-title {
+      border-bottom: solid 1px #eaeefb;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      color: #99a9bf;
+      background-color: #f8f9fe;
+    }
+
+    img {
+      size: 100px;
+      margin: 10px;
+    }
+  }
 </style>

examples/docs/zh-cn/popover.md

@@ -208,6 +208,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 |  transition     |  定义渐变动画      | String             | — | fade-in-linear |
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
 |  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| popper-class | 为 popper 添加类名 | String | - | -|
 
 ### Slot
 | 参数               | 说明                                                     |

packages/popover/src/main.vue

@@ -3,6 +3,7 @@
     <transition :name="transition" @after-leave="doDestroy">
       <div
         class="el-popover"
+        :class="[popperClass]"
         ref="popper"
         v-show="showPopper"
         :style="{ width: width + 'px' }">
@@ -39,6 +40,7 @@ export default {
     title: String,
     content: String,
     reference: {},
+    popperClass: String,
     width: {},
     visibleArrow: {
       default: true

packages/steps/src/step.vue

@@ -60,8 +60,8 @@ export default {
   data() {
     return {
       index: -1,
-      style: { width: '', height: '' },
-      lineStyle: { width: '', height: '' },
+      style: {},
+      lineStyle: {},
       mainOffset: 0,
       currentStatus: this.status
     };
@@ -88,18 +88,21 @@ export default {
 
     calcProgress(status) {
       let step = 100;
+      const style = {};
 
-      this.lineStyle.transitionDelay = 150 * this.index + 'ms';
+      style.transitionDelay = 150 * this.index + 'ms';
       if (status === this.$parent.processStatus) {
         step = 50;
       } else if (status === 'wait') {
         step = 0;
-        this.lineStyle.transitionDelay = (-150 * this.index) + 'ms';
+        style.transitionDelay = (-150 * this.index) + 'ms';
       }
 
       this.$parent.direction === 'vertical'
-        ? this.lineStyle.height = step + '%'
-        : this.lineStyle.width = step + '%';
+        ? style.height = step + '%'
+        : style.width = step + '%';
+
+      this.lineStyle = style;
     }
   },