<template>
|
<view
|
class="tn-steps-class tn-steps"
|
:style="{
|
flexDirection: direction
|
}"
|
>
|
<view
|
v-for="(item, index) in list"
|
:key="index"
|
class="tn-steps__item"
|
:class="[`tn-steps__item--${direction}`]"
|
@tap="clickStepItem(index)"
|
>
|
<!-- 数值模式 -->
|
<view
|
v-if="mode === 'number'"
|
class="tn-steps__item__number"
|
:style="{
|
backgroundColor: currentIndex <= index ? 'transparent' : activeColor,
|
borderColor: currentIndex <= index ? inActiveColor : activeColor
|
}"
|
>
|
<text
|
class="tn-steps__item__number__text"
|
:class="[{'tn-steps__item__number__text--visible': currentIndex <= index}]"
|
:style="{
|
color: currentIndex <= index ? inActiveColor : activeColor
|
}"
|
>
|
{{ index + 1}}
|
</text>
|
<view class="tn-steps__item__number__icon" :class="[`tn-icon-${item.icon || icon}`,{'tn-steps__item__number__icon--visible': currentIndex > index}]"></view>
|
</view>
|
|
<!-- 点模式 -->
|
<view
|
v-if="mode === 'dot'"
|
class="tn-steps__item__dot"
|
:style="{
|
backgroundColor: currentIndex <= index ? inActiveColor : activeColor
|
}"
|
></view>
|
|
<!-- 图标模式 -->
|
<view
|
v-if="mode === 'icon'"
|
class="tn-steps__item__icon"
|
:class="[iconModeClass(index)]"
|
:style="{
|
color: currentIndex <= index ? inActiveColor : activeColor
|
}"
|
></view>
|
|
<!-- 点图标模式 -->
|
<view v-if="mode === 'dotIcon'" class="tn-steps__item__dot-icon">
|
<view v-if="currentIndex <= index" class="tn-steps__item__dot-icon--dot" :style="{backgroundColor: inActiveColor}"></view>
|
<view v-else class="tn-steps__item__dot-icon--icon" :class="[iconModeClass(index)]" :style="{color: activeColor}"></view>
|
</view>
|
|
<!-- 步骤下的文字 -->
|
<text
|
v-if="showTitle"
|
class="tn-steps__item__text tn-text-ellipsis"
|
:class="[`tn-steps__item__text--${direction}`]"
|
:style="{
|
color: currentIndex <= index ? inActiveColor : activeColor
|
}"
|
>
|
{{ item.name }}
|
</text>
|
|
<!-- 连接的横线 -->
|
<view
|
v-if="index < list.length - 1"
|
class="tn-steps__item__line"
|
:class="[`tn-steps__item__line--${mode}`]"
|
:style="{
|
borderColor: currentIndex <= index + 1 ? inActiveColor : activeColor
|
}"
|
></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: 'tn-steps',
|
props: {
|
// 模式类型
|
// dot -> 点 number -> 数字 icon -> 图标 dotIcon -> 点图标
|
mode: {
|
type: String,
|
default: 'dot'
|
},
|
// 步骤条的方向
|
// row -> 横向 column -> 竖向
|
direction: {
|
type: String,
|
default: 'row'
|
},
|
// 步骤条数据
|
list: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
// 当前激活的步数
|
current: {
|
type: Number,
|
default: 0
|
},
|
// 激活步骤的颜色
|
activeColor: {
|
type: String,
|
default: '#01BEFF'
|
},
|
// 未激活步骤的颜色
|
inActiveColor: {
|
type: String,
|
default: '#AAAAAA'
|
},
|
// 激活后显示的图标，在数字模式下有效
|
icon: {
|
type: String,
|
default: 'success'
|
},
|
// 是否显示标题
|
showTitle: {
|
type: Boolean,
|
default: true
|
}
|
},
|
computed: {
|
// icon模式下图标的值
|
iconModeClass() {
|
return (index) => {
|
const item = this.list[index]
|
// 状态被选中并且对应数据下存在selectIcon属性
|
if (this.currentIndex > index && item.hasOwnProperty('selectIcon')) {
|
return `tn-icon-${item.selectIcon}`
|
} else {
|
// 未选中
|
return `tn-icon-${item.icon || this.icon}`
|
}
|
}
|
}
|
},
|
data() {
|
return {
|
currentIndex: 0
|
}
|
},
|
watch: {
|
current: {
|
handler(val) {
|
this.currentIndex = val
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
// 点击了某一个选项
|
clickStepItem(index) {
|
const chooseIndex = index + 1
|
this.currentIndex = chooseIndex
|
this.$emit('click', { index: chooseIndex })
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
$tn-steps-item-number-width: 44rpx;
|
$tn-steps-item-dot-width: 20rpx;
|
|
.tn-steps {
|
display: flex;
|
flex-direction: row;
|
|
&__item {
|
flex: 1;
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
min-width: 100rpx;
|
font-size: 28rpx;
|
text-align: center;
|
|
&__number {
|
// display: flex;
|
// flex-wrap: wrap;
|
// align-items: center;
|
// justify-content: center;
|
position: relative;
|
width: $tn-steps-item-number-width;
|
height: $tn-steps-item-number-width;
|
line-height: calc(#{$tn-steps-item-number-width} - 2rpx);
|
border: 1px solid #AAAAAA;
|
border-radius: 50%;
|
overflow: hidden;
|
transition: all 0.3s linear;
|
|
&__text {
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
margin: auto;
|
transition: inherit;
|
transform: translateY(-#{$tn-steps-item-number-width});
|
|
&--visible {
|
transform: translateY(0);
|
}
|
}
|
|
&__icon {
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
margin: auto;
|
color: #FFFFFF;
|
transition: all 0.3s linear;
|
transform: translateY(#{$tn-steps-item-number-width});
|
|
&--visible {
|
transform: translateY(0);
|
}
|
}
|
}
|
|
&__dot {
|
width: $tn-steps-item-dot-width;
|
height: $tn-steps-item-dot-width;
|
display: flex;
|
flex-direction: row;
|
border-radius: 50%;
|
transition: all 0.3s linear;
|
|
&--icon {
|
width: $tn-steps-item-number-width;
|
height: $tn-steps-item-number-width;
|
}
|
}
|
|
&__icon {
|
width: $tn-steps-item-number-width;
|
height: $tn-steps-item-number-width;
|
font-size: $tn-steps-item-number-width;
|
transition: all 0.3s linear;
|
}
|
|
&__dot-icon {
|
width: $tn-steps-item-number-width;
|
height: $tn-steps-item-number-width;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
transition: all 0.3s linear;
|
|
&--dot {
|
width: $tn-steps-item-dot-width;
|
height: $tn-steps-item-dot-width;
|
border-radius: 50%;
|
transition: inherit;
|
}
|
|
&--icon {
|
width: $tn-steps-item-number-width;
|
height: $tn-steps-item-number-width;
|
font-size: $tn-steps-item-number-width;
|
transition: inherit;
|
}
|
}
|
|
&__text {
|
transition: all 0.3s linear;
|
&--row {
|
margin-top: 14rpx;
|
}
|
|
&--column {
|
margin-left: 14rpx;
|
}
|
}
|
|
&__line {
|
position: absolute;
|
z-index: 0;
|
vertical-align: middle;
|
transition: all 0.3s linear;
|
}
|
|
&--row {
|
display: flex;
|
flex-direction: column;
|
|
.tn-steps__item__line {
|
border-bottom-width: 1px;
|
border-bottom-style: solid;
|
width: 50%;
|
left: 75%;
|
|
&--dot {
|
top: calc(#{$tn-steps-item-dot-width} / 2);
|
}
|
|
&--number, &--icon, &--dotIcon {
|
top: calc(#{$tn-steps-item-number-width} / 2);
|
}
|
}
|
}
|
|
&--column {
|
display: flex;
|
flex-direction: row;
|
justify-content: flex-start;
|
min-height: 120rpx;
|
|
.tn-steps__item__line {
|
border-left-width: 1px;
|
border-left-style: solid;
|
height: 50%;
|
top: 75%;
|
|
&--dot {
|
left: calc(#{$tn-steps-item-dot-width} / 2);
|
}
|
|
&--number, &--icon, &--dotIcon {
|
left: calc(#{$tn-steps-item-number-width} / 2);
|
}
|
}
|
}
|
}
|
}
|
</style>
|
