1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| <template>
| <uni-shadow-root class="vant-steps-index"><view :class="'custom-class '+(utils.bem('steps', [direction]))">
| <view class="van-step__wrapper">
| <view v-for="(item,index) in (steps)" :key="item.index" @click="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 v-if="index !== active">
| <van-icon v-if="item.inactiveIcon || inactiveIcon" :color="status(index, active) === 'inactive' ? inactiveColor: activeColor" :name="item.inactiveIcon || inactiveIcon" custom-class="van-step__icon"></van-icon>
| <view v-else class="van-step__circle" :style="'background-color: ' + (index < active ? activeColor : inactiveColor)"></view>
| </block>
|
| <van-icon v-else :name="item.activeIcon || activeIcon" :color="activeColor" custom-class="van-step__icon"></van-icon>
| </view>
| <view v-if="index !== steps.length - 1" class="van-step__line" :style="'background-color: ' + (index < active ? activeColor : inactiveColor)"></view>
| </view>
| </view>
| </view></uni-shadow-root>
| </template>
| <wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs module="status" src="./index-status.wxs"></wxs>
| <script>
| import VanIcon from '../icon/index.vue'
| global['__wxVueOptions'] = {components:{'van-icon': VanIcon}}
|
| global['__wxRoute'] = 'vant/steps/index'
| import { VantComponent } from '../common/component';
| import { GREEN, GRAY_DARK } from '../common/color';
| VantComponent({
| classes: ['desc-class'],
| props: {
| icon: String,
| steps: Array,
| active: Number,
| direction: {
| type: String,
| value: 'horizontal',
| },
| activeColor: {
| type: String,
| value: GREEN,
| },
| inactiveColor: {
| type: String,
| value: GRAY_DARK,
| },
| activeIcon: {
| type: String,
| value: 'checked',
| },
| inactiveIcon: String,
| },
| methods: {
| onClick(event) {
| const { index } = event.currentTarget.dataset;
| this.$emit('click-step', index);
| },
| },
| });
| export default global['__wxComponents']['vant/steps/index']
| </script>
| <style platform="mp-weixin">
| @import '../common/index.css';.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:-webkit-flex;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;-webkit-flex:1;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{-webkit-transform:none;transform:none}.van-step--horizontal:first-child .van-step__circle-container{padding:0 8px 0 0;-webkit-transform:translate3d(0,50%,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;-webkit-transform:none;transform:none}.van-step--horizontal:last-child .van-step__circle-container{right:0;padding:0 0 0 8px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal .van-step__circle-container{position:absolute;bottom:6px;z-index:1;-webkit-transform:translate3d(-50%,50%,0);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;-webkit-transform:translate3d(-50%,0,0);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;-webkit-transform:translate3d(0,50%,0);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;-webkit-transform:translate3d(-50%,-50%,0);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%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);background-color:#ebedf0;background-color:var(--step-line-color,#ebedf0)}
| </style>
|
|
