手写一个带三角箭头的面包屑

骑猪看日落 2021-07-24 19:33 268阅读 0赞

![在这里插入图片描述][20200521112833799.gif]

# 面包屑代码 #

<div class="crumbs">
    			<div ref="bg_triangle_first" class="bg-triangle">
    				<div ref="crumbs_item_first" hd="header" class="crumbs-item" @click="onToDir(formatGetCurrentPath)">{
       { formatGetCurrentPath }}</div>
    				<div class="theMiddletriangle"></div>
    			</div>
    			<template v-for="(i, j) in PathAccessHistory">
    				<div ref="bg_triangle_remaining" class="bg-triangle">
    					<div ref="crumbs_item_remaining" class="crumbs-item" @click="onToDir(i)">{
       { i }}</div>
    					<div class="theMiddletriangle"></div>
    				</div>
    			</template>
    		</div>

// 面包屑盒子 .crumbs { 
    		height: 40px;
    		background-color: #ebebeb;
    		font-size: 14px;
    		display: flex;
    		width: 100%;
    		white-space: nowrap;
    		overflow-x: scroll;
    	}
    	// 三角形背景 .bg-triangle { 
    		display: flex;
    		align-items: center;
    		margin-right: -20px;
    	}
    	// 三角形背景 后部伪类 .bg-triangle::after { 
    		content: '';
    		display: inline-block;
    		box-sizing: border-box;
    		border-top: 18px solid transparent;
    		border-left: 10px solid #ebebeb;
    		border-right: 0px solid transparent;
    		border-bottom: 18px solid transparent;
    		margin-left: -11px;
    	}
    	// 三角形后部伪类白色背景激活 .bg-triangle-act::after { 
    		border-left: 10px solid #ffffff;
    		z-index: 1;
    	}
    	// 第一个重改pdiind .crumbs-item[hd='header']{ 
    		padding: 0 10px 0 10px;
    	}
    	.crumbs-item { 
    		height: 36px;
    		line-height: 36px;
    		padding: 0 10px 0 30px;
    	}
    	// 目录条白色背景激活 .crumbs-item-act { 
    		background-color: #ffffff;
    	}
    .theMiddletriangle { 
    	border-top: 20px solid transparent;
    	border-left: 11px solid #ebebeb;
    	border-right: 0px solid transparent;
    	border-bottom: 20px solid transparent;
    	z-index: 1;
    }
    .theMiddletriangle::after { 
    	
    }

# 全部代码 #

<template>
    	<div id="FolderPathManagement">
    		
    		<header>
    			<i class="iconfont icon-arrow-lift" @click="onBack"></i>
    			<div class="header-txt" style=""><label>选择上传的路径</label></div>
    			<div @click="onNewFolder">新建文件夹</div>
    		</header>
    
    		
    		<div class="crumbs">
    			<div ref="bg_triangle_first" class="bg-triangle">
    				<div ref="crumbs_item_first" hd="header" class="crumbs-item" @click="onToDir(formatGetCurrentPath)">{
       { formatGetCurrentPath }}</div>
    				<div class="theMiddletriangle"></div>
    			</div>
    			<template v-for="(i, j) in PathAccessHistory">
    				<div ref="bg_triangle_remaining" class="bg-triangle">
    					<div ref="crumbs_item_remaining" class="crumbs-item" @click="onToDir(i)">{
       { i }}</div>
    					<div class="theMiddletriangle"></div>
    				</div>
    			</template>
    		</div>
    
    		
    		<section>
    			<div class="box">
    				<div class="box-item" v-for="(i, j) in folderList" :key="j" @click="onNextFolder(i)">
    					<img class="box-item-img" src="../static/imgs/NewFolder.png" />
    					<label>{
       { i.name }}</label>
    				</div>
    			</div>
    		</section>
    
    		
    		<footer>
    			<van-button class="btns" type="info" plain @click="onCancel">取消</van-button>
    			<van-button class="btns" type="info">上传至xxx</van-button>
    		</footer>
    
    		
    		<van-popup v-model="van_popup" style="border-radius: 10px;overflow: hidden;padding: 10px;">
    			<new-folder ref="NewFolder" @van_popup_cancel="van_popup_cancel" :PathAccessHistory="PathAccessHistory" @freshFolderAPI="freshFolderAPI"></new-folder>
    		</van-popup>
    	</div>
    </template>
    
    <script> import { FolderList } from '../api/home.js'; import { mapGetters } from 'vuex'; import NewFolder from './NewFolder.vue'; export default { name: 'FolderPathManagement', components: { NewFolder }, data() { return { msg: '文件路径管理页面', folderList: '', PathAccessHistory: [], // 路径访问历史 van_popup: false }; }, watch: { PathAccessHistory() { console.log('666'); if (this.PathAccessHistory.length == 0) { console.log('00000'); this.$refs.crumbs_item_first.classList.remove('crumbs-item-act'); this.$refs.bg_triangle_first.classList.remove('bg-triangle-act'); return; } if (this.PathAccessHistory.length == 1) { console.log('111'); this.$refs.crumbs_item_first.classList.add('crumbs-item-act'); this.$refs.bg_triangle_first.classList.add('bg-triangle-act'); return; } let that = this; this.$nextTick(() => { let crumbsItemList = that.$refs.crumbs_item_remaining; let triangeList = that.$refs.bg_triangle_remaining; crumbsItemList.forEach((i, j) => { i.classList.remove('crumbs-item-act'); if (j == crumbsItemList.length - 1) { return; } i.classList.add('crumbs-item-act'); }); console.log(triangeList); triangeList.forEach((i, j) => { i.classList.remove('bg-triangle-act'); if (j == triangeList.length - 1) { return; } i.classList.add('bg-triangle-act'); }); }); } }, computed: { ...mapGetters(['GetCurrentPath']), // 路径处理字符 formatGetCurrentPath() { return this.GetCurrentPath.replace('/', ''); } // 计算是否添加目录白色激活背景 }, mounted() { // 获取当前目录下的文件及文件夹接口 this.GetFolderList(this.GetCurrentPath); }, methods: { onBack() { this.$router.go(-1); }, onCancel() { this.$router.go(-1); }, // 新建文件夹 onNewFolder() { this.van_popup = true; }, // 弹窗口隐藏 van_popup_cancel(e) { this.van_popup = e; }, // 接口 async GetFolderList(dir) { let that = this; await FolderList({ dir }).then(res => { let resultarr = []; let wenjianjia = res.prefixes; wenjianjia ? wenjianjia.map(i => { resultarr.push({ type: 'folder', fullpath: i, name: i.toString().split('/')[i.toString().split('/').length - 2] }); }) : '文件夹为空不遍历'; this.folderList = resultarr; }); }, // 下一级文件夹 onNextFolder(e) { this.GetFolderList(e.fullpath); this.PathAccessHistory.push(e.name); }, // 面包屑，跳转路径 onToDir(e) { if (e == this.formatGetCurrentPath) { // 点击艮目录 this.PathAccessHistory = []; this.GetFolderList(e + '/'); return; } if (e == this.PathAccessHistory[this.PathAccessHistory.length - 1]) { // 点击到当前目录不做操作 return; } let index; this.PathAccessHistory.map((i, j) => { if (e == i) return (index = j); }); // 取下标 this.PathAccessHistory = this.PathAccessHistory.slice(0, index + 1); // 删除当前组件的历史路径 let fullpath = this.GetCurrentPath; // 目录重刷： this.PathAccessHistory.forEach(i => { // fullpath 路径组合 fullpath = fullpath + i + '/'; }); this.GetFolderList(fullpath); // 重申接口 }, // 供NewFolder组件调用 freshFolderAPI(e) { this.GetFolderList(e); } } }; </script>
    
    <style lang="less" scoped="scoped"> #FolderPathManagement { header { padding: 10px; display: flex; width: 100%; align-items: center; justify-content: space-between; box-sizing: border-box; height: 55px; box-shadow: -2px 0px 8px 2px #a3a2a2; } .header-txt { font-size: 20px; font-weight: 600; display: flex; justify-content: center; position: absolute; left: calc(50%); transform: translate3d(-50%, 0, 0); } // 面包屑盒子 .crumbs { height: 40px; background-color: #ebebeb; font-size: 14px; display: flex; width: 100%; white-space: nowrap; overflow-x: scroll; } // 三角形背景 .bg-triangle { display: flex; align-items: center; margin-right: -20px; } // 三角形背景 后部伪类 .bg-triangle::after { content: ''; display: inline-block; box-sizing: border-box; border-top: 18px solid transparent; border-left: 10px solid #ebebeb; border-right: 0px solid transparent; border-bottom: 18px solid transparent; margin-left: -11px; } // 三角形后部伪类白色背景激活 .bg-triangle-act::after { border-left: 10px solid #ffffff; z-index: 1; } // 第一个重改pdiind .crumbs-item[hd='header']{ padding: 0 10px 0 10px; } .crumbs-item { height: 36px; line-height: 36px; padding: 0 10px 0 30px; } // 目录条白色背景激活 .crumbs-item-act { background-color: #ffffff; } section { .box { } .box-item { display: flex; align-items: center; padding: 16px 0px 16px 20px; border-bottom: solid 1px #dfdfdf; font-size: 14px; font-weight: 500; } .box-item-img { height: 30px; width: 30px; padding-right: 20px; } } footer { display: flex; width: 100%; justify-content: space-around; position: fixed; bottom: 0; background-color: #f0f0f0; padding: 8px; box-sizing: border-box; .btns { flex-basis: 46%; border-radius: 10px; } } } .iconfont { font-size: 30px; line-height: 30px; } .theMiddletriangle { border-top: 20px solid transparent; border-left: 11px solid #ebebeb; border-right: 0px solid transparent; border-bottom: 20px solid transparent; z-index: 1; } .theMiddletriangle::after { } </style>

[20200521112833799.gif]: /images/20210724/7fe699642361432dba118d331d249151.png