<!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>
封装移动端面包屑(Vue版)
最新推荐文章于 2024-06-12 20:47:29 发布