mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
f86afcb694
* [bugfix] CouponList always show empty info * [bugfix] add click feedback of buttons in components * [Doc] add custom theme document * [new feature] Notice bar support more props * [bugfix] PullRefresh test cases * [bugfix] unused NoticeBar style * [bugfix] Swipe width calc error * [Doc] english document of all action components * [Doc] change document site path to /zanui/vant * [Doc] fix * [bugfix] uploader style error * [bugfix] tabs document demo * [new feature] Cell support vue-router target route * [bugfix] add cell test cases * update yarn.lock * [bugfix] Tabbar cann't display info when use icon slot * [Doc] update document title * [bugfix] Dialog should reset button text when showed * [new feature] CouponList add showCloseButton prop * [new feature] Swipe add 'initialSwipe' prop * [bugfix] NoticeBar text disappeared when page back * [new feature] ImagePreview support startPosition * fix: improve imagePreview test cases * [bugfix] Steps style error when has more than 4 items
62 lines
1.2 KiB
Vue
62 lines
1.2 KiB
Vue
<template>
|
|
<div :class="['van-steps', `van-steps--${direction}`]">
|
|
<div class="van-steps__status" v-if="title || description">
|
|
<div class="van-steps__icon" v-if="icon || $slots.icon">
|
|
<slot name="icon">
|
|
<van-icon :name="icon" :class="iconClass"></van-icon>
|
|
</slot>
|
|
</div>
|
|
<div class="van-steps__message">
|
|
<div class="van-steps__message-wrapper">
|
|
<div class="van-steps__title" v-text="title"></div>
|
|
<div class="van-steps__desc" v-text="description"></div>
|
|
</div>
|
|
</div>
|
|
<slot name="message-extra">
|
|
</slot>
|
|
</div>
|
|
<div class="van-steps__items" :class="{
|
|
'van-steps__items--alone': !title && !description
|
|
}">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Icon from '../icon';
|
|
|
|
export default {
|
|
name: 'van-steps',
|
|
|
|
components: {
|
|
[Icon.name]: Icon
|
|
},
|
|
|
|
props: {
|
|
active: Number,
|
|
icon: String,
|
|
iconClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
title: String,
|
|
description: String,
|
|
direction: {
|
|
type: String,
|
|
default: 'horizontal'
|
|
},
|
|
activeColor: {
|
|
type: String,
|
|
default: '#06bf04'
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
steps: []
|
|
};
|
|
}
|
|
};
|
|
</script>
|