大余网站,做网站怎么报价,软件it网站建设方案,深圳 营销型网站建设针对步骤条封装完终于清清楚楚啦
先看效果#xff1a; 附上代码#xff1a;使用可直接复用#xff1a;数据是写在了当前组件中#xff0c;如有必须#xff0c;可以使用其中的props传值stepInfos传递相应的数据#xff0c;根据steps步数就可以控制走到哪一步啦
temp… 针对步骤条封装完终于清清楚楚啦
先看效果 附上代码使用可直接复用数据是写在了当前组件中如有必须可以使用其中的props传值stepInfos传递相应的数据根据steps步数就可以控制走到哪一步啦
templateview classstep-barview classstep_item v-for(item,index) in stepInfo.list :keyitem.idview :classstepInfo.step index1 ? circle circle-active:circle/viewview :classstepInfo.step index2 ? line line-active:line v-ifindex!stepInfo.list.length-1/viewview classmiddle-boxtext:classstepInfo.step index1 ? text1-actived:stepInfo.step index1?text1-active:text1{{item.name}}/texttext classtext2{{item.time}}/text/viewview classstatus_text:classstepInfo.step index1 ? text1-actived:stepInfo.step index1?text1-active:text1{{item.status}}/view/view/view
/templatescriptexport default {props: {// 传递步骤参数stepInfo: {type: Object,default: function() {return {list: [],step: 0}}}},data() {return {stepInfo: {step: 3,list: [{id: 1,name: 发起充值,time: 2020-12-12 12:47:56,status: 已完成}, {id: 2,name: 处理中,time: 2020-12-12 12:47:56,status: 进行中}, {id: 3,name: 到账成功,time: 2020-12-12 12:47:56,status: 未开始}]}}},}
/scriptstyle langscss scoped.step_item {position: relative;height: 144rpx;display: flex;.line {position: absolute;top: 40rpx;left: 8rpx;content: ;width: 4rpx;height: 100rpx;background-color: #E6E8EF;}.line-active {background-color: #FF2B46;}}.circle {width: 20rpx;height: 20rpx;margin-right: 40rpx;margin-top: 10rpx;border-radius: 50%;background-color: #E6E8EF;}.circle-active {background-color: #FF2B46;}.middle-box {display: flex;flex-direction: column;.text2 {color: #999999;font-size: 24rpx;}}.text1 {color: #666666;font-size: 28rpx;}.text1-active {color: #FF2B46;}.text1-actived {color: #333333;}.status_text {flex-grow: 1;display: flex;justify-content: flex-end;font-size: 28rpx;}.status_text_active {// color: #FF2B46;}
/style
