[bugfix] Steps: fix render error in wechat 7.0.3

fix #1336

packages/steps/README.md

@@ -70,10 +70,3 @@ Page({
 | 类名 | 说明 |
 |-----------|-----------|
 | custom-class | 根节点样式类 |
-
-### 更新日志
-
-| 版本 | 类型 | 内容 |
-|-----------|-----------|-----------|
-| 0.0.1 | feature | 新增组件 |
-| 0.3.4 | bugfix | 修复样式错误的问题 |

packages/steps/index.less

@@ -36,8 +36,8 @@
   &__circle {
     width: 5px;
     height: 5px;
-    border-radius: 50%;
     background-color: @gray-dark;
+    border-radius: 50%;
   }
 
   &--horizontal {
@@ -60,8 +60,8 @@
       width: auto;
 
       .van-step__title {
-        transform: none;
         text-align: right;
+        transform: none;
       }
 
       .van-step__circle-container {
@@ -88,9 +88,9 @@
 
     .van-step__line {
       position: absolute;
-      left: 0;
       right: 0;
       bottom: 6px;
+      left: 0;
       height: 1px;
       background-color: @border-color;
       transform: translate3d(0, 50%, 0);
@@ -102,16 +102,15 @@
       .van-step__active {
         display: block;
         font-size: 12px;
-        color: @green;
         line-height: 1;
       }
     }
   }
 
   &--vertical {
+    padding: 10px 10px 10px 0;
     font-size: 14px;
     line-height: 18px;
-    padding: 10px 10px 10px 0;
 
     &::after {
       border-bottom-width: 1px;
@@ -123,14 +122,14 @@
 
     &:first-child {
       &::before {
-        content: '';
         position: absolute;
-        width: 1px;
-        height: 20px;
-        background-color: @white;
         top: 0;
         left: -15px;
         z-index: 1;
+        width: 1px;
+        height: 20px;
+        background-color: @white;
+        content: '';
       }
     }
 

packages/steps/index.ts

@@ -14,36 +14,5 @@ VantComponent({
       type: String,
       value: GREEN
     }
-  },
-
-  watch: {
-    steps: 'formatSteps',
-    active: 'formatSteps'
-  },
-
-  created() {
-    this.formatSteps();
-  },
-
-  methods: {
-    formatSteps() {
-      const { steps } = this.data;
-      steps.forEach((step, index) => {
-        step.status = this.getStatus(index);
-      });
-      this.set({ steps });
-    },
-
-    getStatus(index) {
-      const { active } = this.data;
-
-      if (index < active) {
-        return 'finish';
-      } else if (index === active) {
-        return 'process';
-      }
-
-      return '';
-    }
   }
 });

packages/steps/index.wxml

@@ -1,20 +1,35 @@
-<view class="custom-class van-steps van-steps--{{ direction }}">
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="custom-class {{ utils.bem('steps', [direction]) }}">
   <view class="van-step__wrapper">
     <view
       wx:for="{{ steps }}"
       wx:key="index"
-      class="van-step van-hairline van-step--{{ direction }} {{ item.status ? 'van-step--' + item.status : '' }}"
+      class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline"
-      style="{{ width ? 'width:' + width + 'px' : '' }}"
     >
-      <view class="van-step__title" style="{{ item.status === 'process' ? 'color: ' + activeColor : '' }}">
+      <view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
         <view>{{ item.text }}</view>
         <view>{{ item.desc }}</view>
       </view>
       <view class="van-step__circle-container">
-        <view class="van-step__circle" wx:if="{{ item.status !== 'process' }}" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
+        <view class="van-step__circle" wx:if="{{ index !== active }}" style="{{ index < active ? 'background-color: ' + activeColor : '' }}" />
         <van-icon wx:else name="checked" color="{{ activeColor }}" custom-class="van-step__active" />
       </view>
-      <view wx:if="{{ index !== steps.length - 1 }}" class="van-step__line" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
+      <view wx:if="{{ index !== steps.length - 1 }}" class="van-step__line" style="{{ index < active ? 'background-color: ' + activeColor : '' }}" />
     </view>
   </view>
 </view>
+
+<wxs module="status">
+function get(index, active) {
+  if (index < active) {
+    return 'finish';
+  } else if (index === active) {
+    return 'process';
+  }
+
+  return '';
+}
+
+module.exports = get;
+</wxs>