待优化
面包屑 breadcrumb阶梯式导航
WARNING
此组件默认开启router模式,若环境下无vue-router,不可绑定to进行跳转
使用说明
简单引入
引入breadcrumb
组件后,通过breadcrumb-item
组件定义层级
breadcrumb-item
组件to属性定义item跳转路由
展开代码
<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分隔符
展开代码
<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
breadcrumb
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
breadcrumb-item
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
插槽
breadcrumb
插槽名 | 描述 | 有无默认内容 |
---|---|---|
breadcrumb-item
插槽名 | 描述 | 有无默认内容 |
---|---|---|