From 5b1e27073deb96c8fffc952857d3cb9f192e16cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 15:07:00 +0800
Subject: [PATCH] Progress: optimzie dom struct

---
 docs/examples-docs/progress.md     | 63 ++++++++++--------------------
 packages/progress/index.vue        | 53 +++++++------------------
 packages/vant-css/src/progress.css | 45 ++++++++++-----------
 3 files changed, 55 insertions(+), 106 deletions(-)

diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md
index efb9a2993..917183190 100644
--- a/docs/examples-docs/progress.md
+++ b/docs/examples-docs/progress.md
@@ -1,13 +1,11 @@
 <style>
 .demo-progress {
-  &__wrapper {
-    padding: 5px;
+  .van-progress {
     margin: 20px 10px;
   }
 } 
 </style>
 
-
 ## Progress 进度条
 
 ### 使用指南
@@ -21,57 +19,37 @@ Vue.component(Progress.name, Progress);
 
 #### 基础用法
 
-默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
+进度条默认为蓝色，使用`percentage`属性来设置当前进度
 
 :::demo 基础用法
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
-</div>
+<van-progress :percentage="0"></van-progress>
+<van-progress :percentage="46"></van-progress>
+<van-progress :percentage="100"></van-progress>
 ```
 :::
 
 
-#### Inactive
+#### 进度条置灰
 
-是否置灰进度条，一般用于进度条被取消时。
-
-:::demo Inactive
+:::demo 进度条置灰
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" inactive :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" inactive :percentage="100"></van-progress>
-</div>
+<van-progress inactive :percentage="0"></van-progress>
+<van-progress inactive :percentage="46"></van-progress>
+<van-progress inactive :percentage="100"></van-progress>
 ```
 :::
 
 
-#### 自定义颜色和文字
+#### 样式定制
 
 可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
 
-:::demo 自定义颜色和文字
+:::demo 样式定制
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
-</div>
+<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
+<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
+<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
 ```
 :::
 
@@ -79,9 +57,8 @@ Vue.component(Progress.name, Progress);
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| inactive | 是否置灰 | `boolean`  | `false`          | `true`, `false`    |
-| percentage | 进度百分比 | `number`  | `false`          | `0-100`    |
-| pivotText | 文字显示 | `string`  | 百分比文字          | -   |
-| color | 进度条颜色 | `string`  | `#38f`    | hexvalue   |
-| textColor | 进度条文字颜色 | `string`  | `#fff`    | hexvalue   |
-
+| inactive | 是否置灰 | `boolean` | `false` | |
+| percentage | 进度百分比 | `number` | `false` | `0-100` |
+| pivotText | 文字显示 | `string` | 百分比文字 | - |
+| color | 进度条颜色 | `string` | `#38f` | hexvalue |
+| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
diff --git a/packages/progress/index.vue b/packages/progress/index.vue
index 4e89cfd58..685a46135 100644
--- a/packages/progress/index.vue
+++ b/packages/progress/index.vue
@@ -1,27 +1,11 @@
 <template>
   <div class="van-progress">
-    <div class="van-progress__bar">
-      <span class="van-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
-      <span class="van-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
-    </div>
+    <span class="van-progress__portion" :style="portionStyle"></span>
+    <span class="van-progress__pivot" :style="pivotStyle">{{ pivotText }}</span>
   </div>
 </template>
 
 <script>
-/**
- * van-progress
- * @module components/progress
- * @desc 开关
- * @param {boolean} [inactive=false] - 是否置灰
- * @param {number} [percentage=0] - 进度百分比
- * @param {string} [pivotText=percentage] - 进度条显示文字
- * @param {string} [color='#38f'] - 进度条颜色
- * @param {string} [textColor='#fff'] - 进度条文字颜色
- *
- * @example
- * <van-switch checked="true" disabled="false"></van-switch>
- */
-
 const DEFAULT_COLOR = '#38f';
 const DEFAULT_TEXT_COLOR = '#fff';
 const INACTIVE_COLOR = '#cacaca';
@@ -33,14 +17,12 @@ export default {
     percentage: {
       type: Number,
       required: true,
-      validator(value) {
-        return value <= 100 && value >= 0;
-      }
+      validator: value => value >= 0 && value <= 100
     },
     inactive: Boolean,
     pivotText: {
       type: String,
-      default: function() {
+      default() {
         return this.percentage + '%';
       }
     },
@@ -59,24 +41,19 @@ export default {
       return this.inactive ? INACTIVE_COLOR : this.color;
     },
     pivotStyle() {
-      const pivotStyle = {
-        backgroundColor: this.componentColor,
+      const { percentage } = this;
+      return {
         color: this.textColor,
-        left: this.percentage + '%',
-        marginLeft: '-14px'
+        backgroundColor: this.componentColor,
+        left: percentage <= 5 ? '0%' : percentage >= 95 ? '100%' : percentage + '%',
+        marginLeft: percentage <= 5 ? '0' : percentage >= 95 ? '-28px' : '-14px'
+      };
+    },
+    portionStyle() {
+      return {
+        width: this.percentage + '%',
+        backgroundColor: this.componentColor
       };
-      if (this.percentage <= 5) {
-        pivotStyle.left = '0%';
-        pivotStyle.marginLeft = '0';
-      } else if (this.percentage >= 95) {
-        pivotStyle.left = '100%';
-        pivotStyle.marginLeft = '-28px';
-      } else {
-        pivotStyle.left = this.percentage + '%';
-        pivotStyle.marginLeft = '-14px';
-      }
-
-      return pivotStyle;
     }
   }
 };
diff --git a/packages/vant-css/src/progress.css b/packages/vant-css/src/progress.css
index a087660fb..645d7db64 100644
--- a/packages/vant-css/src/progress.css
+++ b/packages/vant-css/src/progress.css
@@ -1,32 +1,27 @@
 @import './common/var.css';
 
 .van-progress {
-  &__bar {
-    height: 4px;
-    border-radius: 4.5px;
-    width: 100%;
-    background: $c-gray-light;
-    position: relative;
+  height: 4px;
+  position: relative;
+  border-radius: 4px;
+  background: $c-gray-light;
 
-    &__finished-portion {
-      border-radius: 4.5px;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      display: inline-block;
-    }
+  &__portion {
+    left: 0;
+    height: 100%;
+    position: absolute;
+    border-radius: 4px;
+  }
 
-    &__pivot {
-      padding: 2px 0;
-      font-size: 8px;
-      position: absolute;
-      border-radius: 6px;
-      width: 28px;
-      background-color: $c-gray-light;
-      line-height: 8px;
-      text-align: center;
-      top: 50%;
-      transform: translate3d(0, -50%, 0);
-    }
+  &__pivot {
+    top: 50%;
+    width: 28px;
+    font-size: 8px;
+    margin-top: -6px;
+    position: absolute;
+    border-radius: 6px;
+    line-height: 12px;
+    text-align: center;
+    background-color: $c-gray-light;
   }
 }