Vue2面包屑（Breadcrumb）

Vue3面包屑（Breadcrumb）

可自定义设置以下属性：

router的路由数组（routes），必传，默认为[]
面包屑高度（height），默认60px
自定义分隔符（separator），默认''，使用 > 分隔

效果如下图：

①创建面包屑组件Breadcrumb.vue：

<template><div class="m-breadcrumb" :style="`height: ${height}px;`"><div class="m-bread" v-for="(route, index) in routes" :key="index"><a:class="['u-route',{ active: index===len-1 }]"@click="index === len - 1 ? e => e.preventDefault() : goRouter(route)":title="route.name">{{ route.name || '--' }}</a><template v-if="index !== len - 1"><span v-if="separator" class="u-separator">{{ separator }}</span><svg v-else class="u-arrow" viewBox="64 64 896 896" data-icon="right" aria-hidden="true" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></template></div><div class="assist"></div></div>
</template>
<script>
export default {name: 'Breadcrumb',props: {routes: { // router的路由数组type: Array,required: true,default: () => {return []}},height: { // 面包屑高度type: Number,default: 60},separator: { // 自定义分隔符type: String,default: ''}},computed: {len () { // 面包屑层级总数return this.routes.length}},methods: {goRouter (route) {this.$router.push({ path: route.path, query: route.query || {} })}}
}
</script>
<style lang="less" scoped>
.m-breadcrumb {.m-bread {display: inline-block;vertical-align: middle;.u-route {height: 22px;font-size: 16px;font-weight: 400;line-height: 22px;color: #333;display: inline-block;vertical-align: middle;max-width: 240px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;&:hover {color: @themeColor;}}.active {color: @themeColor;cursor: default;}.u-separator {display: inline-block;vertical-align: middle;margin: 0 6px;}.u-arrow {.u-separator();margin: 0 5px;width: 12px;height: 12px;}}.assist {height: 100%;width: 0;display: inline-block;vertical-align: middle;}
}
</style>

②在要使用的页面引入：

<Breadcrumb class="mt60" :routes="routes" :height="60" separator="/" />
import Breadcrumb from '@/components/Breadcrumb'
components: {Breadcrumb
},
routes: [{path: '/first', // 路由地址query: { id: 1, tab: 2 }, // 路由参数name: '一级路由' // 路由名称},{path: '/second',name: '二级路由'},{path: '/third',name: '三级路由三级路由三级路由三级路由三级路由三级路由三级路由'}
]

Vue2面包屑（Breadcrumb）相关推荐

Vue3面包屑（Breadcrumb）
Vue2面包屑(Breadcrumb) 可自定义设置以下属性: router 的路由数组(routes),必传,类型:Array<{path: string, query?: object, n ...
后台——侧边和面包屑导航栏设计与实现方案
一.功能描述后台管理系统最重要的功能之一无疑是导航的设计,不管是侧边导航栏还是头部面包屑导航栏,导航与路由如何去匹配是开发人员需要去考虑的问题.点击侧边导航栏的某一项可以跳转到当前页面的路由,头部面 ...
react Antd 的面包屑与导航使用例子
使用面包屑,当点击不同二级导航,显示不同面包屑,代码重点是: 在Layout渲染的页面中: import React from "react"; import "./st ...
vue3 - 仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件
仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件 element-ui 面包屑结构 <el-breadcrumb separator="/"&g ...
改变路径但是不让它跳转_Vue实战047：Breadcrumb面包屑实现导航路径
前言在网站中我们经常看到有个导航路径,可以直观地显示当前页面的路径,并快速返回之前的任意页面.这是一个非常实用的功能,也是在Web前端必备的导航UI之一.今天我们借助el-breadcrumb来快速 ...
react+ant design Breadcrumb面包屑组件
import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd' ...
一行代码搞定WordPress面包屑导航breadcrumb
有好几位网友在问WordPress面包屑导航breadcrumb怎么操作,网上有些教程是去function文件中定义,其实不用那么复杂,很简单一行代码就能搞定.下面随ytkah一起来看看.如果是单页, ...
Vue elementUI中的Breadcrumb面包屑
目录一.前言二.组件使用三.总结一.前言面包屑用于显示当前页面的路径,快速返回之前的任意页面. 例如: 二.组件使用 elementUI官网的实例十分简单,并没有配合路由来创建面包屑. 但是 ...
Bootstrap 面包屑导航（Breadcrumb）
一.Bootstrap 面包屑导航 1.1 面包屑导航css 面包屑导航是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置,是 ...

Vue2面包屑（Breadcrumb）

Vue2面包屑（Breadcrumb）相关推荐

最新文章

热门文章