效果图
单击按钮逐次进行下一步
代码
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>步骤条</title>
<script src='./js/vue.js'></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#app {
position: relative;
width: 880px;
height: 400px;
padding: 100px;
margin: 100px auto;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
box-sizing: border-box;
}
#app button {
width: 100px;
height: 40px;
border-radius: 10px;
position: absolute;
bottom: 150px;
left: 50px;
border: 2px solid #5f5f5f;
background-color: #fff;
font-size: 20px;
font-weight: 9000;
}
#app button:hover {
border-color:#478fd5;
color:#478fd5;
}
.el_step {
width: 640px;
}
.el_step ul {
display: flex;
align-items: center;
justify-content: center;
}
.el_step ul li {
display: flex;
}
.el_step ul li span {
width: 300px;
height: 0px;
border: 2px solid #c0c4cc;
margin-top: 19px;
margin-left: 0px;
}
.el_step ul li>div p:nth-of-type(1) {
display: inline-block;
width: 40px;
height: 40px;
border: 2px solid #c0c4cc;
border-radius: 50%;
box-sizing: border-box;
line-height: 40px;
text-align: center;
color: #c0c4cc;
font-weight: 900;
}
.el_step ul li>div p:nth-of-type(2) {
font-size: 14px;
margin-top: 10px;
font-weight: 900;
color: #c0c4cc;
}
/* 步骤到达 样式 */
.el_step ul .on span {
border-color: #67c23a;
transition: all .3s;
}
.el_step ul .on #div {
color: #67c23a;
transition: all .3s;
}
.el_step ul .on #div p:nth-of-type(1) {
border-color: #67c23a;
color: #67c23a;
transition: all .3s;
}
.el_step ul .on #div p:nth-of-type(2) {
color: #67c23a;
transition: all .3s;
}
/* 步骤到达 样式 */
/* 步骤预到达 样式 */
.el_step ul .in #div {
color: #000;
}
.el_step ul .in #div p:nth-of-type(1) {
border-color: #000;
color: #000;
}
.el_step ul .in #div p:nth-of-type(2) {
color: #000;
}
/* 步骤预到达 样式 */
</style>
</head>
<body>
<div id='app'>
<el_step :list="list" :active="active"></el_step>
<button @click="add()">下一步</button>
</div>
<!-- 组件 template模板 -->
<template id="el-step">
<div class="el_step">
<ul>
<li v-for="(item,index) in list" :key="index"
:class="item.id <= active ? 'on' : item.id == active+1 ? 'in' : ''">
<!-- 线 v-show显示2条 -->
<span v-show="item.id >=2"></span>
<div id="div">
<p v-text="item.id <= active ? '✔' : item.id"></p>
<p> {
{ item.name }}</p>
</div>
</li>
</ul>
</div>
</template>
</body>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示，
// 内
let el_step = {
template: "#el-step",
props: {
list: {
typeof: Array,
default: () => {
return []
}
},
active: {
typeof: Number,
default: 0
}
},
};
// 创建Vue实例
var vm = new Vue({
// 绑定dom
el: '#app',
// 数据
data() {
return {
active: 0,
list: [
{
id: 1,
name: "步骤1",
},
{
id: 2,
name: "步骤2",
},
{
id: 3,
name: "步骤3",
},
]
}
},
// 注册组件
components: {
// 步骤1 ~ 3
el_step
},
// 事件方法
methods: {
add() {
if (this.active >= 3) {
this.active = 0
} else {
this.active++
}
}
}
})
</script>
</html>