You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

248 lines
5.3 KiB

<template>
<view class="tui-steps-box" :class="{ 'tui-steps-column': direction === 'column' }">
<view
class="tui-step-item"
:style="{ width: direction === 'column' ? '100%' : spacing }"
:class="[direction === 'row' ? 'tui-step-horizontal' : 'tui-step-vertical']"
v-for="(item, index) in items"
:key="index"
>
<view class="tui-step-item-ico" :style="{ width: direction === 'column' ? '36rpx' : '100%' }">
<view
v-if="!item.name && !item.icon"
class="tui-step-ico"
:class="[direction === 'column' ? 'tui-step-column_ico' : 'tui-step-row_ico']"
:style="{
width: type == 2 || activeSteps === index ? '36rpx' : '16rpx',
height: type == 2 || activeSteps === index ? '36rpx' : '16rpx',
backgroundColor: index <= activeSteps ? activeColor : type == 2 ? '#fff' : deactiveColor,
borderColor: index <= activeSteps ? activeColor : deactiveColor
}"
>
<text v-if="activeSteps !== index" :style="{ color: index <= activeSteps ? '#fff' : '' }">{{ type == 1 ? '' : index + 1 }}</text>
<tui-icon name="check" :size="16" color="#fff" v-if="activeSteps === index"></tui-icon>
</view>
<view class="tui-step-custom" :style="{backgroundColor:backgroundColor}" v-if="item.name || item.icon">
<tui-icon :name="item.name" :size="20" :color="index <= activeSteps ? activeColor : deactiveColor" v-if="item.name"></tui-icon>
<image :src="index <= activeSteps ? item.activeIcon : item.icon" class="tui-step-img" mode="widthFix" v-if="!item.name"></image>
</view>
<view
class="tui-step-line"
:class="['tui-step-' + direction + '_line', direction == 'column' && (item.name || item.icon) ? 'tui-custom-left' : '']"
:style="{
borderColor: index <= activeSteps - 1 ? activeColor : deactiveColor,
borderRightStyle: direction == 'column' ? lineStyle : '',
borderTopStyle: direction == 'column' ? '' : lineStyle
}"
v-if="index != items.length - 1"
></view>
</view>
<view class="tui-step-item-main" :class="['tui-step-' + direction + '_item_main']">
<view
class="tui-step-item-title"
:style="{
color: index <= activeSteps ? activeColor : deactiveColor,
fontSize: titleSize + 'rpx',
lineHeight: titleSize + 'rpx',
fontWeight: bold ? 'bold' : 'normal'
}"
>
{{ item.title }}
</view>
<view class="tui-step-item-content" :style="{ color: index <= activeSteps ? activeColor : deactiveColor, fontSize: descSize + 'rpx' }">{{ item.desc }}</view>
</view>
</view>
</view>
</template>
<script>
//如果自定义传入图标内容,则需要拆分组件
export default {
name: 'tuiSteps',
props: {
// 1-默认步骤 2-数字步骤
type: {
type: Number,
default: 1
},
spacing: {
type: String,
default: '160rpx'
},
// 方向 row column
direction: {
type: String,
default: 'row'
},
// 激活状态成功颜色
activeColor: {
type: String,
default: '#5677fc'
},
// 未激活状态颜色
deactiveColor: {
type: String,
default: '#999999'
},
//title字体大小
titleSize: {
type: Number,
default: 28
},
//title是否粗体
bold: {
type: Boolean,
default: false
},
//desc字体大小
descSize: {
type: Number,
default: 24
},
// 当前步骤
activeSteps: {
type: Number,
default: -1
},
//线条样式 同border线条样式
lineStyle: {
type: String,
default: 'solid'
},
/**
* [{
title: "标题",
desc: "描述",
name:"字体图标 thorui icon内",
icon:"图片图标",
activeIcon:"已完成步骤显示图片图标"
}]
* */
items: {
type: Array,
default() {
return [];
}
},
//自定义item内容时背景色
backgroundColor:{
type: String,
default: '#fff'
}
},
data() {
return {};
}
};
</script>
<style scoped>
.tui-steps-box {
width: 100%;
display: flex;
justify-content: center;
}
.tui-steps-column {
flex-direction: column;
}
.tui-step-ico {
border-radius: 80rpx;
position: relative;
z-index: 3;
margin: 0 auto;
border-width: 1rpx;
border-style: solid;
display: flex;
align-items: center;
justify-content: center;
}
.tui-step-row_ico {
top: 50%;
transform: translateY(-50%);
}
.tui-step-column_ico {
top: 0;
}
.tui-step-line {
position: absolute;
left: 50%;
top: 20rpx;
width: 100%;
height: 0rpx;
border-top-width: 1rpx;
z-index: 2;
}
.tui-step-row_item_main {
text-align: center;
}
.tui-step-item {
font-size: 24rpx;
position: relative;
box-sizing: border-box;
}
.tui-step-item-ico {
height: 36rpx;
line-height: 36rpx;
text-align: center;
}
.tui-step-custom {
display: flex;
align-items: center;
justify-content: center;
width: 48rpx;
height: 40rpx;
position: relative;
z-index: 4;
margin: 0 auto;
}
.tui-step-img {
width: 40rpx;
height: 40rpx;
}
.tui-step-item-main {
margin-top: 16rpx;
clear: both;
}
.tui-step-item-title {
word-break: break-all;
}
.tui-step-item-content {
margin-top: 8rpx;
word-break: break-all;
}
.tui-step-vertical {
width: 100%;
display: flex;
padding-bottom: 60rpx;
}
.tui-step-column_item_main {
margin-top: 0;
padding-left: 20rpx;
}
.tui-step-column_line {
position: absolute;
height: 100%;
top: 0;
left: 18rpx;
margin: 0;
width: 0rpx;
border-right-width: 1rpx;
}
.tui-custom-left {
left: 20rpx !important;
}
</style>