mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
ffa3fddfae
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [bugfix] Search box-sizing wrong * [Doc] update vant-demo respo * [Doc] translate theme & demo pages * [Doc] add Internationalization document * [bugfix] remove unnecessary props
56 lines
1.2 KiB
Vue
56 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" />
|
|
</slot>
|
|
</div>
|
|
<div class="van-steps__message">
|
|
<div class="van-steps__message-wrapper">
|
|
<div class="van-steps__title" v-text="title" />
|
|
<div class="van-steps__desc" v-text="description" />
|
|
</div>
|
|
</div>
|
|
<slot name="message-extra" />
|
|
</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: {
|
|
icon: String,
|
|
title: String,
|
|
active: Number,
|
|
iconClass: String,
|
|
description: String,
|
|
direction: {
|
|
type: String,
|
|
default: 'horizontal'
|
|
},
|
|
activeColor: {
|
|
type: String,
|
|
default: '#06bf04'
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
steps: []
|
|
};
|
|
}
|
|
};
|
|
</script>
|