vue2 使用组件实现步骤条

效果图
单击按钮逐次进行下一步
在这里插入图片描述

代码

 <!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>复制

标签

vue2 使用组件实现步骤条

解决全局安装pnpm后无法使用的问题

解决VUE3 Vite打包后动态图片资源不显示问题

vue基于sockjs-client stompjs实现websocket客户端

Vue 3 项目中导入外部的＜link＞和＜script＞资源

VueDraggable实现组件内部拖拽、跨组件拖拽功能

Vue将中英文本base64编码及解码

Vue获取url上的参数

vue省市区三级联动选择器

eslint prettier vue3格式化

Vue Router 进阶

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!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>

vue2 使用组件 实现步骤条

微信扫一扫：分享

vue2 使用组件实现步骤条