微信登录版

wechat_v2/miniprogram_npm/@vant/weapp/steps/index.js

@@ -0,0 +1,35 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var component_1 = require('../common/component');
+var color_1 = require('../common/color');
+component_1.VantComponent({
+  classes: ['desc-class'],
+  props: {
+    icon: String,
+    steps: Array,
+    active: Number,
+    direction: {
+      type: String,
+      value: 'horizontal',
+    },
+    activeColor: {
+      type: String,
+      value: color_1.GREEN,
+    },
+    inactiveColor: {
+      type: String,
+      value: color_1.GRAY_DARK,
+    },
+    activeIcon: {
+      type: String,
+      value: 'checked',
+    },
+    inactiveIcon: String,
+  },
+  methods: {
+    onClick: function (event) {
+      var index = event.currentTarget.dataset.index;
+      this.$emit('click-step', index);
+    },
+  },
+});

wechat_v2/miniprogram_npm/@vant/weapp/steps/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

wechat_v2/miniprogram_npm/@vant/weapp/steps/index.wxml

@@ -0,0 +1,54 @@
+<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"
+      bindtap="onClick"
+      data-index="{{ index }}"
+      class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline"
+      style="{{ status(index, active) === 'inactive' ? 'color: ' + inactiveColor: '' }}"
+    >
+      <view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
+        <view>{{ item.text }}</view>
+        <view class="desc-class">{{ item.desc }}</view>
+      </view>
+      <view class="van-step__circle-container">
+        <block wx:if="{{ index !== active }}">
+          <van-icon
+            wx:if="{{ item.inactiveIcon || inactiveIcon }}"
+            color="{{ status(index, active) === 'inactive' ? inactiveColor: activeColor }}"
+            name="{{ item.inactiveIcon || inactiveIcon }}"
+            custom-class="van-step__icon"
+          />
+          <view
+            wx:else
+            class="van-step__circle"
+            style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
+          />
+        </block>
+
+        <van-icon wx:else name="{{ item.activeIcon || activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
+      </view>
+      <view
+        wx:if="{{ index !== steps.length - 1 }}"
+        class="van-step__line" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
+      />
+    </view>
+  </view>
+</view>
+
+<wxs module="status">
+function get(index, active) {
+  if (index < active) {
+    return 'finish';
+  } else if (index === active) {
+    return 'process';
+  }
+
+  return 'inactive';
+}
+
+module.exports = get;
+</wxs>

wechat_v2/miniprogram_npm/@vant/weapp/steps/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-steps{overflow:hidden;background-color:#fff;background-color:var(--steps-background-color,#fff)}.van-steps--horizontal{padding:10px}.van-steps--horizontal .van-step__wrapper{position:relative;display:flex;overflow:hidden}.van-steps--vertical{padding-left:10px}.van-steps--vertical .van-step__wrapper{padding:0 0 0 20px}.van-step{position:relative;flex:1;font-size:14px;font-size:var(--step-font-size,14px);color:#969799;color:var(--step-text-color,#969799)}.van-step--finish{color:#323233;color:var(--step-finish-text-color,#323233)}.van-step__circle{border-radius:50%;width:5px;width:var(--step-circle-size,5px);height:5px;height:var(--step-circle-size,5px);background-color:#969799;background-color:var(--step-circle-color,#969799)}.van-step--horizontal{padding-bottom:14px}.van-step--horizontal:first-child .van-step__title{transform:none}.van-step--horizontal:first-child .van-step__circle-container{padding:0 8px 0 0;transform:translate3d(0,50%,0)}.van-step--horizontal:last-child{position:absolute;right:0;width:auto}.van-step--horizontal:last-child .van-step__title{text-align:right;transform:none}.van-step--horizontal:last-child .van-step__circle-container{right:0;padding:0 0 0 8px;transform:translate3d(0,50%,0)}.van-step--horizontal .van-step__circle-container{position:absolute;bottom:6px;z-index:1;transform:translate3d(-50%,50%,0);background-color:#fff;background-color:var(--white,#fff);padding:0 8px;padding:0 var(--padding-xs,8px)}.van-step--horizontal .van-step__title{display:inline-block;transform:translate3d(-50%,0,0);font-size:12px;font-size:var(--step-horizontal-title-font-size,12px)}.van-step--horizontal .van-step__line{position:absolute;right:0;bottom:6px;left:0;height:1px;transform:translate3d(0,50%,0);background-color:#ebedf0;background-color:var(--step-line-color,#ebedf0)}.van-step--horizontal.van-step--process{color:#323233;color:var(--step-process-text-color,#323233)}.van-step--horizontal.van-step--process .van-step__icon{display:block;line-height:1;font-size:12px;font-size:var(--step-icon-size,12px)}.van-step--vertical{padding:10px 10px 10px 0;line-height:18px}.van-step--vertical:after{border-bottom-width:1px}.van-step--vertical:last-child:after{border-bottom-width:none}.van-step--vertical:first-child:before{position:absolute;top:0;left:-15px;z-index:1;width:1px;height:20px;content:"";background-color:#fff;background-color:var(--white,#fff)}.van-step--vertical .van-step__circle,.van-step--vertical .van-step__icon,.van-step--vertical .van-step__line{position:absolute;top:19px;left:-14px;z-index:2;transform:translate3d(-50%,-50%,0)}.van-step--vertical .van-step__icon{line-height:1;font-size:12px;font-size:var(--step-icon-size,12px)}.van-step--vertical .van-step__line{z-index:1;width:1px;height:100%;transform:translate3d(-50%,0,0);background-color:#ebedf0;background-color:var(--step-line-color,#ebedf0)}