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.

201 lines
4.4 KiB

10 months ago
<template>
<view class="">
<view
class="u-steps"
:style="{
flexDirection: direction
}"
>
<view class="u-steps__item"
:class="['u-steps__item--' + direction]"
v-for="(item, index) in list" :key="index"
>
<view
class="u-steps__item__num"
v-if="mode == 'number'"
:style="{
backgroundColor: current < index ? 'transparent' : activeColor,
borderColor: current < index ? unActiveColor : activeColor
}"
>
<text v-if="current < index" :style="{
color: current < index ? unActiveColor : activeColor,
}">
{{ index + 1 }}
</text>
<u-icon v-else size="22" color="#ffffff" :name="icon"></u-icon>
</view>
<view class="u-steps__item__dot" v-if="mode == 'dot'" :style="{
backgroundColor: index <= current ? activeColor : unActiveColor
}"></view>
<text class="u-line-1" :style="{
color: index <= current ? activeColor : unActiveColor,
}" :class="['u-steps__item__text--' + direction]">
{{ item.name }}
</text>
<view class="u-steps__item__line" :class="['u-steps__item__line--' + mode]" v-if="index < list.length - 1">
<u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* steps 步骤条
* @description 该组件一般用于完成一个任务要分几个步骤标识目前处于第几步的场景
* @tutorial https://www.uviewui.com/components/steps.html
* @property {String} mode 设置模式默认dot
* @property {Array} list 数轴条数据数组具体见上方示例
* @property {String} type type主题默认primary
* @property {String} direction row-横向column-竖向默认row
* @property {Number String} current 设置当前处于第几步
* @property {String} active-color 已完成步骤的激活颜色如设置type值会失效
* @property {String} un-active-color 未激活的颜色用于表示未完成步骤的颜色默认#606266
* @example <u-steps :list="numList" active-color="#fa3534"></u-steps>
*/
export default {
name: 'u-steps',
props: {
// 步骤条的类型,dot|number
mode: {
type: String,
default: 'dot'
},
// 步骤条的数据
list: {
type: Array,
default() {
return [];
}
},
// 主题类型, primary|success|info|warning|error
type: {
type: String,
default: 'primary'
},
// 当前哪一步是激活的
current: {
type: [Number, String],
default: 0
},
// 激活步骤的颜色
activeColor: {
type: String,
default: '#2979ff'
},
// 未激活的颜色
unActiveColor: {
type: String,
default: '#909399'
},
// 自定义图标
icon: {
type: String,
default: 'checkmark'
},
// step的排列方向,row-横向,column-竖向
direction: {
type: String,
default: 'row'
}
},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';
$u-steps-item-number-width: 44rpx;
$u-steps-item-dot-width: 20rpx;
.u-steps {
@include vue-flex;
.u-steps__item {
flex: 1;
text-align: center;
position: relative;
min-width: 100rpx;
font-size: 26rpx;
color: #8799a3;
@include vue-flex;
justify-content: center;
flex-direction: column;
align-items: center;
&--row {
@include vue-flex;
flex-direction: column;
.u-steps__item__line {
position: absolute;
z-index: 0;
left: 75%;
width: 50%;
&--dot {
top: calc(#{$u-steps-item-dot-width} / 2);
}
&--number {
top: calc(#{$u-steps-item-number-width} / 2);
}
}
}
&--column {
@include vue-flex;
flex-direction: row;
justify-content: flex-start;
min-height: 120rpx;
.u-steps__item__line {
position: absolute;
z-index: 0;
height: 50%;
top: 75%;
&--dot {
left: calc(#{$u-steps-item-dot-width} / 2);
}
&--number {
left: calc(#{$u-steps-item-number-width} / 2);
}
}
}
&__num {
@include vue-flex;
align-items: center;
justify-content: center;
width: $u-steps-item-number-width;
height: $u-steps-item-number-width;
border: 1px solid #8799a3;
border-radius: 50%;
overflow: hidden;
}
&__dot {
width: $u-steps-item-dot-width;
height: $u-steps-item-dot-width;
@include vue-flex;
border-radius: 50%;
}
&__text--row {
margin-top: 14rpx;
}
&__text--column {
margin-left: 14rpx;
}
}
}
</style>