Progress: optimzie dom struct

docs/examples-docs/progress.md

@@ -1,13 +1,11 @@
 <style>
 .demo-progress {
-  &__wrapper {
+  .van-progress {
-    padding: 5px;
     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 :percentage="0"></van-progress>
-  <van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
+<van-progress :percentage="46"></van-progress>
-</div>
+<van-progress :percentage="100"></van-progress>
-<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>
 ```
 :::
 
 
-#### Inactive
+#### 进度条置灰
 
-是否置灰进度条，一般用于进度条被取消时。
+:::demo 进度条置灰
-
-:::demo Inactive
 ```html
-<div class="demo-progress__wrapper">
+<van-progress inactive :percentage="0"></van-progress>
-  <van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
+<van-progress inactive :percentage="46"></van-progress>
-</div>
+<van-progress inactive :percentage="100"></van-progress>
-<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>
 ```
 :::
 
 
-#### 自定义颜色和文字
+#### 样式定制
 
 可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
 
-:::demo 自定义颜色和文字
+:::demo 样式定制
 ```html
-<div class="demo-progress__wrapper">
+<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
-  <van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
+<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
-</div>
+<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
-<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>
 ```
 :::
 
@@ -79,9 +57,8 @@ Vue.component(Progress.name, Progress);
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| inactive | 是否置灰 | `boolean`  | `false`          | `true`, `false`    |
+| inactive | 是否置灰 | `boolean` | `false` | |
 | percentage | 进度百分比 | `number` | `false` | `0-100` |
 | pivotText | 文字显示 | `string` | 百分比文字 | - |
 | color | 进度条颜色 | `string` | `#38f` | hexvalue |
 | textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
-

packages/progress/index.vue

@@ -1,27 +1,11 @@
 <template>
   <div class="van-progress">
-    <div class="van-progress__bar">
+    <span class="van-progress__portion" :style="portionStyle"></span>
-      <span class="van-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
+    <span class="van-progress__pivot" :style="pivotStyle">{{ pivotText }}</span>
-      <span class="van-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
-    </div>
   </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) {
+      validator: value => value >= 0 && value <= 100
-        return value <= 100 && value >= 0;
-      }
     },
     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 = {
+      const { percentage } = this;
-        backgroundColor: this.componentColor,
+      return {
         color: this.textColor,
-        left: this.percentage + '%',
+        backgroundColor: this.componentColor,
-        marginLeft: '-14px'
+        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;
     }
   }
 };

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;
+  border-radius: 4px;
+  background: $c-gray-light;
 
-    &__finished-portion {
+  &__portion {
-      border-radius: 4.5px;
+    left: 0;
     height: 100%;
     position: absolute;
-      left: 0;
+    border-radius: 4px;
-      display: inline-block;
   }
 
   &__pivot {
-      padding: 2px 0;
+    top: 50%;
+    width: 28px;
     font-size: 8px;
+    margin-top: -6px;
     position: absolute;
     border-radius: 6px;
-      width: 28px;
+    line-height: 12px;
-      background-color: $c-gray-light;
-      line-height: 8px;
     text-align: center;
-      top: 50%;
+    background-color: $c-gray-light;
-      transform: translate3d(0, -50%, 0);
-    }
   }
 }