Merge pull request #26 from QingWei-Li/master

Fix badge, card, tooltip

examples/docs/badge.md

@@ -1,3 +1,9 @@
+<style>
+  .demo-badge.demo-box .el-dropdown {
+    vertical-align: middle;
+  }
+</style>
+
 ## Badge 标记
 出现在按钮、图标旁的数字或状态标记
 

examples/docs/breadcrumb.md

@@ -1,5 +1,5 @@
 ## Breadcrumb 面包屑
-显示当前页面的路径，快速返回之前的任意页面
+显示当前页面的路径，快速返回之前的任意页面。
 
 ### 基础用法
 
@@ -9,10 +9,10 @@
 
 ```html
 <el-breadcrumb separator="/">
-  <el-breadcrumb-item>Home</el-breadcrumb-item>
+  <el-breadcrumb-item>首页</el-breadcrumb-item>
-  <el-breadcrumb-item>Page 1</el-breadcrumb-item>
+  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
-  <el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
+  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
-  <el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
+  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
 </el-breadcrumb>
 ```
 :::

examples/docs/card.md

@@ -41,6 +41,10 @@
   .clearfix {
     @utils-clearfix;
   }
+
+  .box-card {
+    width: 480px;
+  }
 </style>
 ## Card 卡片
 将信息聚合在卡片容器中展示。
@@ -52,7 +56,7 @@
 
 :::demo Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时也是可选的。
 ```html
-<el-card>
+<el-card class="box-card">
   <div slot="header" class="clearfix">
     <span style="line-height: 36px;">卡片名称</span>
     <el-button style="float: right;" type="primary">操作按钮</el-button>
@@ -70,7 +74,7 @@
 
 :::demo
 ```html
-<el-card>
+<el-card class="box-card">
   <div v-for="o in 4" class="text item">
     {{'列表内容 ' + o }}
   </div>

examples/docs/menu.md

@@ -52,7 +52,7 @@
 
 ## NavMenu 导航菜单
 
-为网站提供导航功能的菜单
+为网站提供导航功能的菜单。
 
 ### 顶栏
 

examples/docs/steps.md

@@ -15,11 +15,11 @@
 </script>
 
 ## Steps 步骤条
-引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于2步
+引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
 
-### 基础步骤条
+### 基础用法
 
-下两例分别展示了定宽的步骤条和自适应的步骤条：
+简单的步骤条。
 
 :::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
 ```html
@@ -29,7 +29,7 @@
   <el-step title="步骤 3"></el-step>
 </el-steps>
 
-<el-button @click.native="next">下一步</el-button>
+<el-button style="margin-top: 12px;" @click.native="next">下一步</el-button>
 
 <script>
   export default {
@@ -49,19 +49,9 @@
 ```
 :::
 
-:::demo Steps组件提供了5种状态：`wait`，`process`，`finish`，`error`，`success`。
+### 含状态步骤条
-```html
-<el-steps :active="1" process-status="error">
-  <el-step title="步骤 1"></el-step>
-  <el-step title="步骤 2"></el-step>
-  <el-step title="步骤 3"></el-step>
-</el-steps>
-```
-:::
 
-### 状态与描述
+每一步骤显示出该步骤的状态。
-
-Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
 
 :::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
 ```html
@@ -73,7 +63,9 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
 ```
 :::
 
-除了`title`外，还可以用`description`属性来补充说明，下面是一个使用了`description`的例子：
+### 有描述的步骤条
+
+每个步骤有其对应的步骤状态描述。
 
 :::demo
 ```html
@@ -86,6 +78,7 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
 :::
 
 ### 带图标的步骤条
+步骤条内可以启用各种自定义的图标。
 
 :::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
 ```html
@@ -99,7 +92,7 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
 
 ### 竖式步骤条
 
-默认情况下，步骤条为横向显示，也可以显示竖向显示的步骤条。
+竖直方向的步骤条。
 
 :::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
 ```html

examples/docs/tabs.md

@@ -2,20 +2,7 @@
   export default {
     data() {
       return {
-        tabs: [{
+        activeName: 'first',
-          title: '选项卡一',
-          content: '选项卡一内容'
-        },{
-          title: '选项卡二',
-          content: '选项卡二内容'
-        },{
-          title: '选项卡三',
-          content: '选项卡三内容'
-        },{
-          title: '选项卡四',
-          content: '选项卡四内容'
-        }],
-        activeName: 'two',
         activeName2: ''
       }
     },
@@ -35,7 +22,7 @@
   }
 </style>
 ## Tabs 标签页
-分隔内容上有关联但属于不同类别的数据集合
+分隔内容上有关联但属于不同类别的数据集合。
 
 ### 基础用法
 
@@ -46,17 +33,17 @@
 ```html
 <template>
   <el-tabs :active-name="activeName">
-    <el-tab-pane label="选项卡一"></el-tab-pane>
+    <el-tab-pane name="first" label="用户管理"></el-tab-pane>
-    <el-tab-pane name="two" label="选项卡二"></el-tab-pane>
+    <el-tab-pane label="配置管理"></el-tab-pane>
-    <el-tab-pane label="选项卡三"></el-tab-pane>
+    <el-tab-pane label="角色管理"></el-tab-pane>
-    <el-tab-pane label="选项卡四"></el-tab-pane>
+    <el-tab-pane label="定时任务补偿"></el-tab-pane>
   </el-tabs>
 </template>
 <script>
   export default {
     data() {
       return {
-        activeName: 'two'
+        activeName: 'first'
       };
     }
   };
@@ -73,10 +60,10 @@
 ```html
 <template>
   <el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
-    <el-tab-pane label="选项卡一"></el-tab-pane>
+    <el-tab-pane label="用户管理"></el-tab-pane>
-    <el-tab-pane label="选项卡二"></el-tab-pane>
+    <el-tab-pane label="配置管理"></el-tab-pane>
-    <el-tab-pane label="选项卡三"></el-tab-pane>
+    <el-tab-pane label="角色管理"></el-tab-pane>
-    <el-tab-pane label="选项卡四"></el-tab-pane>
+    <el-tab-pane label="定时任务补偿"></el-tab-pane>
   </el-tabs>
 </template>
 <script>
@@ -96,17 +83,17 @@
 
 ### 可关闭
 
-可以关闭标签页
+可以关闭标签页。
 
 :::demo 在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
 
 ```html
 <template>
   <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
-    <el-tab-pane label="选项卡一"></el-tab-pane>
+    <el-tab-pane label="用户管理"></el-tab-pane>
-    <el-tab-pane label="选项卡二"></el-tab-pane>
+    <el-tab-pane label="配置管理"></el-tab-pane>
-    <el-tab-pane label="选项卡三"></el-tab-pane>
+    <el-tab-pane label="角色管理"></el-tab-pane>
-    <el-tab-pane label="选项卡四"></el-tab-pane>
+    <el-tab-pane label="定时任务补偿"></el-tab-pane>
   </el-tabs>
 </template>
 <script>
@@ -131,10 +118,10 @@
 :::demo 将`type`设置为`border-card`。
 ```html
 <el-tabs type="border-card">
-  <el-tab-pane label="选项卡一"></el-tab-pane>
+  <el-tab-pane label="用户管理"></el-tab-pane>
-  <el-tab-pane label="选项卡二"></el-tab-pane>
+  <el-tab-pane label="配置管理"></el-tab-pane>
-  <el-tab-pane label="选项卡三"></el-tab-pane>
+  <el-tab-pane label="角色管理"></el-tab-pane>
-  <el-tab-pane label="选项卡四"></el-tab-pane>
+  <el-tab-pane label="定时任务补偿"></el-tab-pane>
 </el-tabs>
 ```
 :::

package.json

@@ -69,6 +69,7 @@
     "vue-popup": "^0.2.3",
     "vue-router": "^2.0.0-beta.2",
     "webpack": "^1.13.2",
-    "webpack-dev-server": "^1.15.1"
+    "webpack-dev-server": "^1.15.1",
+    "wind-dom": "0.0.3"
   }
 }

packages/steps/src/step.vue

@@ -112,8 +112,10 @@ export default {
       this.style = { width: space };
       // this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
     } else {
+      if (parent.steps[parent.steps.length - 1] !== this) {
         this.style = { height: space };
       }
+    }
 
     const unwatch = this.$watch('index', val => {
       this.$watch('$parent.active', this.updateStatus, { immediate: true });

packages/theme-default/src/step.css

@@ -19,6 +19,10 @@
       & .el-step__main {
         padding-left: 10px;
       }
+
+      & .el-step__description {
+        width: 300px;
+      }
     }
 
     @e line {

packages/theme-default/src/tooltip.css

@@ -16,7 +16,7 @@
       padding: var(--tooltip-padding);
       z-index: var(--index-popper);
       font-size: var(--tooltip-font-size);
-      line-height: 1;
+      line-height: 1.2;
 
       .popper__arrow,
       .popper__arrow::after {

src/utils/vue-popper.js

@@ -1,5 +1,5 @@
 import PopperJS from 'main/utils/popper';
-
+import { once } from 'wind-dom/src/event';
 /**
  * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
  * @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.
@@ -100,9 +100,7 @@ export default {
 
     doDestroy() {
       if (this.showPopper) return;
-
+      this.popperJS && this.popperJS.destroy();
-      this.popperJS._popper.removeEventListener('transitionend', this.doDestroy);
-      this.popperJS.destroy();
       this.popperJS = null;
     },
 
@@ -110,7 +108,9 @@ export default {
       if (this.popperJS) {
         this.resetTransformOrigin(this.popperJS);
         if (this.transition) {
-          this.popperJS._popper.addEventListener('transitionend', this.doDestroy);
+          once(this.popperJS._popper, 'webkitTransitionEnd', this.doDestroy);
+          once(this.popperJS._popper, 'oTransitionend', this.doDestroy);
+          once(this.popperJS._popper, 'transitionend', this.doDestroy);
         } else {
           this.doDestroy();
         }