vue、Breadcrumb面包屑、Breadcrumb属性、vue Breadcrumb 全部面包屑、vue Breadcrumb 全部属性

• 设计规则
• • 何时使用
• 代码演示
• • 1.基本
  • 2.带有图标的
  • 3.分隔符
  • 4.vue-router
• API
• • 和 browserHistory 配合

设计规则

显示当前页面在系统层级结构中的位置，并能向上返回。

何时使用

• 当系统拥有超过两级以上的层级结构时；
• 当需要告知用户『你在哪里』时；
• 当需要向上导航的功能时。

代码演示

1.基本

最简单的用法

<template><a-breadcrumb><a-breadcrumb-item>Homea-breadcrumb-item><a-breadcrumb-item><a href="">Application Centera>a-breadcrumb-item><a-breadcrumb-item><a href="">Application Lista>a-breadcrumb-item><a-breadcrumb-item>An Applicationa-breadcrumb-item>a-breadcrumb>
template>

2.带有图标的

图标放在文字前面

<template>
<a-breadcrumb><a-breadcrumb-item href=""><a-icon type="home" />a-breadcrumb-item><a-breadcrumb-item href=""><a-icon type="user" /><span>Application Listspan>a-breadcrumb-item><a-breadcrumb-item>Applicationa-breadcrumb-item>
a-breadcrumb>
template>

3.分隔符

使用separator=">"可以自定义分隔符，或者使用slot="separator"自定义更复杂的分隔符

<template>
<div><a-breadcrumb separator=">"><a-breadcrumb-item>Homea-breadcrumb-item><a-breadcrumb-item href="">Application Centera-breadcrumb-item><a-breadcrumb-item href="">Application Lista-breadcrumb-item><a-breadcrumb-item>An Applicationa-breadcrumb-item>a-breadcrumb><a-breadcrumb><span slot="separator" style="color: red">>span><a-breadcrumb-item>Homea-breadcrumb-item><a-breadcrumb-item href="">Application Centera-breadcrumb-item><a-breadcrumb-item href="">Application Lista-breadcrumb-item><a-breadcrumb-item>An Applicationa-breadcrumb-item>a-breadcrumb>
div>
template>

4.vue-router

和 vue-router 进行结合使用。

<template>
<div><a-breadcrumb :routes="routes"><template slot="itemRender" slot-scope="{route, params, routes, paths}"><span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}span><router-link v-else :to="`${basePath}/${paths.join('/')}`">{{route.breadcrumbName}}router-link>template>a-breadcrumb><br/>{{$route.path}}
div>
template><script>export default {data(){const { lang } = this.$route.paramsreturn {basePath: `/${lang}/components/breadcrumb`,routes: [{path: 'index',breadcrumbName: '首页'}, {path: 'first',breadcrumbName: '一级面包屑'}, {path: 'second',breadcrumbName: '当前页面'}],}},}
script>

API

和 browserHistory 配合

和 vue-router 一起使用时，默认生成的 url 路径是带有 # 的，如果和 browserHistory 一起使用的话，你可以使用 itemRender 属性定义面包屑链接。

<template>
<a-breadcrumb :routes="routes"><template slot="itemRender" slot-scope="{route, params, routes, paths}"><span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}span><router-link v-else :to="paths.join('/')">{{route.breadcrumbName}}router-link>template>
a-breadcrumb>
template><script>export default {data(){return {routes: [{path: 'index',breadcrumbName: '首页'}, {path: 'first',breadcrumbName: '一级面包屑'}, {path: 'second',breadcrumbName: '当前页面'}],}},}
script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！