Viog UI

面包屑 breadcrumb 待优化

阶梯式导航

WARNING

此组件默认开启router模式，若环境下无vue-router，不可绑定to进行跳转

使用说明

简单引入

引入breadcrumb组件后，通过breadcrumb-item组件定义层级

breadcrumb-item组件to属性定义item跳转路由

  • 首页
    • /
  • 选项1
    • /
  • 选项1.1
    • /
  • 选项1.1.1
    • /
展开代码
<vi-breadcrumb>
  <vi-breadcrumb-item to="/">首页</vi-breadcrumb-item>
  <vi-breadcrumb-item>选项1</vi-breadcrumb-item>
  <vi-breadcrumb-item>选项1.1</vi-breadcrumb-item>
  <vi-breadcrumb-item>选项1.1.1</vi-breadcrumb-item>
</vi-breadcrumb>

分隔符

通过separator属性定义所有item分隔符

  • 首页
    • >
  • 选项1
    • >
  • 选项1.1
    • >
  • 选项1.1.1
    • >
展开代码
<vi-breadcrumb separator=">">
  <vi-breadcrumb-item>首页</vi-breadcrumb-item>
  <vi-breadcrumb-item>选项1</vi-breadcrumb-item>
  <vi-breadcrumb-item>选项1.1</vi-breadcrumb-item>
  <vi-breadcrumb-item>选项1.1.1</vi-breadcrumb-item>
</vi-breadcrumb>

颜色

通过color属性，定义所有item组件的hover颜色

  • 首页
    • /
  • 组件
    • /
  • 面包屑
    • /
展开代码
<vi-breadcrumb color="purple">
  <vi-breadcrumb-item to="/">首页</vi-breadcrumb-item>
  <vi-breadcrumb-item to="/components">组件</vi-breadcrumb-item>
  <vi-breadcrumb-item to="/components/breadcrumb">面包屑</vi-breadcrumb-item>
</vi-breadcrumb>

你也可以通过item组件的color属性为其定义单独的颜色

  • 首页
    • /
  • 组件
    • /
  • 面包屑
    • /
展开代码
<vi-breadcrumb color="purple">
  <vi-breadcrumb-item to="/" color="green">首页</vi-breadcrumb-item>
  <vi-breadcrumb-item to="/components">组件</vi-breadcrumb-item>
  <vi-breadcrumb-item to="/components/breadcrumb">面包屑</vi-breadcrumb-item>
</vi-breadcrumb>

覆盖跳转

breadcrumb-item组件replace属性，定义跳转为replace模式

  • 首页
    • /
  • 导航
    • /
  • 面包屑
    • /
展开代码
<vi-breadcrumb color="purple">
  <vi-breadcrumb-item to="/" replace>首页</vi-breadcrumb-item>
  <vi-breadcrumb-item to="/update/UPDATE.html" replace>导航</vi-breadcrumb-item>
  <vi-breadcrumb-item to="/components/breadcrumb">面包屑</vi-breadcrumb-item>
</vi-breadcrumb>

Props

属性名描述类型默认值
属性名描述类型默认值

插槽

插槽名描述有无默认内容
插槽名描述有无默认内容