封装移动端面包屑（Vue版）

最新推荐文章于 2024-06-12 20:47:29 发布

澜漾

最新推荐文章于 2024-06-12 20:47:29 发布

阅读量1.2k

点赞数 1

分类专栏： H5新特性实战小demo 文章标签：面包屑

本文链接：https://blog.csdn.net/weixin_44601948/article/details/106789040

版权

H5新特性实战小demo 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,
		 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<script src="https://lib.baomitu.com/vue/2.6.11/vue.common.dev.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
				
			body{
			background-color: #ffeee6;
			}

			/* 面包屑盒子 */
			.crumbs {
				height: 40px;
				font-size: 14px;
				display: flex;
				width: 100%;
				white-space: nowrap;
				overflow-x: scroll;
				background-color: #fff;
			}

			/* 每块路径 */
			.crumbs-item {
				height: 40px;
				line-height: 40px;
				box-sizing: border-box;
				display: flex;
			}

			/* 每块路径下的文本块 */
			.crumbs-item>span {
				padding: 0 10px;
				max-width: 100px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			/* 第一个重改margin-left */
			.crumbs-item:nth-child(1) {
				margin-left: 0;
			}

			/* after伪类的三角形 */
			.crumbs-item::after {
				box-sizing: border-box;
				content: "";
				display: inline-block;
				margin-left: -37px;
				border-top: 20px solid transparent;
				border-left: 20px solid transparent;
				border-right: 0px solid transparent;
				border-bottom: 20px solid transparent;
				z-index: 1;
			}

			/* 中间件的三角形 */
			.theMiddletriangle {
				border-top: 20px solid transparent;
				border-left: 20px solid #ebebeb;
				border-right: 20px solid transparent;
				border-bottom: 20px solid transparent;
				z-index: 3;
			}
			/* 面包屑路径激活 */
			.crumbs-item-active {
				background-color: #ebebeb;
			}
			/* 面包屑路径激活,覆盖伪类 */
			.crumbs-item-active::after {
				background-color: #ebebeb;
				border-left: 20px solid #fff;
			}
			
			/* 覆盖白色区域 */
			.crumbs-item-activeS::after {
				background-color: #fff;
			}

			/* 中间件三角形块隐藏 */
			.theMiddletriangle-active {
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!-- 面包屑 -->
			<div class="crumbs">
				<div class="crumbs-item" v-for="(i,j) in PathAccessHistory" :key="j" @click="onSkip" :data-id='i.id'>
					<span>{{i.text}}</span>
					<div class="theMiddletriangle"></div>
				</div>
			</div>
			
			
			<div style="margin-top: 100px;">
				<div>点击单个路径也跳转</div>
				<button @click="onAdd">点击添加一个路径</button>
				<button @click="onDel">点击删除一个路径</button>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: "#box",
			name: "1",
			data: {
				PathAccessHistory: [{id:1,text:'面包屑'}], // 路径访问历史
			},
			watch: {
				PathAccessHistory() {
					this.init()
				}
			},
			methods: {
				init() {
					let that = this
					// 在PathAccessHistory数组操作完后执行
					this.$nextTick(() => {
						let crumbsItem_List = document.querySelectorAll('.crumbs-item'),		// 面包屑item
							theMiddletriangle_List = document.querySelectorAll('.theMiddletriangle')	// 面包屑item的中间件的三角形
						// 每添加一个路径 滚轮就移动动态距离
						document.querySelector('.crumbs').scrollLeft = document.querySelector('.crumbs').scrollWidth - crumbsItem_List[crumbsItem_List.length-1].offsetWidth
						// 注册路径的点击事件
						crumbsItem_List.forEach((i,j)=>{
							i.onclick = function(){
								let index =  that.PathAccessHistory.findIndex(item=>item.id==i.getAttribute('data-id'))
								if(j==that.PathAccessHistory.length-1) return  // 点击最后一个目录不做操作
								that.PathAccessHistory = that.PathAccessHistory.slice(0,index+1)
							}
						})
						// 初始化类名
						for (let i = 0; crumbsItem_List[i]; i++) {
							crumbsItem_List[i].classList.remove('crumbs-item-active')
							crumbsItem_List[i].classList.remove('crumbs-item-activeS')
							theMiddletriangle_List[i].classList.remove('theMiddletriangle-active')
						}
						// 目录数组的 第一块初始化
						if (crumbsItem_List.length == 1) {
							theMiddletriangle_List[0].classList.add('theMiddletriangle-active')
							return
						}
						// 变量赋值类名
						for (let i = 0; crumbsItem_List[i]; i++) {
							if (i == crumbsItem_List.length - 1) { // 目录数组的 最后一块三角形中间件隐藏
								theMiddletriangle_List[i].classList.add('theMiddletriangle-active')
								return
							}
							crumbsItem_List[i].classList.add('crumbs-item-active') //添加激活类名
							if (i == crumbsItem_List.length - 2) {	//  目录数组的 最后第二块三角形伪类背景改为跟面包屑背景颜色一样
								crumbsItem_List[i].classList.add('crumbs-item-activeS')
							}
						}
					})
				},
				onAdd() {
					let arr = [{id:0,text:"面包屑00"}, {id:0,text:"阿松大01"}, {id:0,text:"啊实打实的02"}, {id:0,text:"阿德撒旦03"},{id:0,text:"多个地方04"}]
					let json = arr[parseInt(Math.random() * (arr.length))]
					json['id'] = Math.random() * 100000000
					this.PathAccessHistory.push(json)
				},
				onDel() {
					if (this.PathAccessHistory.length == 1) return
					this.PathAccessHistory.pop()
				},
				// 点击单个路径 跳转
				onSkip(e){
					// TODO....
					console.log(e.target.innerText)
				}
			},
			mounted() {
				this.init()
			}
		})
	</script>
</html>

澜漾

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
封装移动端面包屑（Vue版）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <s.
复制链接

扫一扫

专栏目录