VUE中自定义步骤条

最新推荐文章于 2024-05-31 09:44:04 发布

Accccce

最新推荐文章于 2024-05-31 09:44:04 发布

阅读量4.3k

点赞数 1

分类专栏： Vue 文章标签：前端 vue

本文链接：https://blog.csdn.net/Accccce/article/details/123661523

版权

VUE中自定义步骤条

下列自定义步骤条是根据elementUI中的el-step的样式改编而得。记录下自己改编过程！！！

<template>
	<div class='steps el-steps el-steps--horizontal'>
		<div class='el-step is-horizontal'
		:class='{isFlex:item.index == stepList.length}'
		style='flex-basis:50%;margin-right:0'
		:style="{
			'flexBasis':(item.index==stepList.length?0:50)+'%',
			'maxWidth':(item.index==stepList.length?(1/stepList.length)*100:100)+'%'
			}"
		v-for="(item,index) in stepList"
		:key='index'
		>
		<div class='el-step__head is-process'>
			<div class='el-step__line'>
				<i class='el-step__line-inner' style='transition-delay:0ms;border-width:0;width:0%'></i>
			</div>
		</div>
		<div class='tex