Breadcrumb 面包屑
页面面包屑导航。
基础用法
查看代码
vue
<template>
<demo-container>
<gov-breadcrumb>
<gov-breadcrumb-item><a href="/">首页</a></gov-breadcrumb-item>
<gov-breadcrumb-item>企业列表</gov-breadcrumb-item>
<gov-breadcrumb-item>企业详情</gov-breadcrumb-item>
</gov-breadcrumb>
</demo-container>
</template>1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
不同大小
查看代码
vue
<template>
<demo-container>
<gov-breadcrumb size="large">
<gov-breadcrumb-item><a href="/">首页</a></gov-breadcrumb-item>
<gov-breadcrumb-item>企业列表</gov-breadcrumb-item>
<gov-breadcrumb-item>企业详情</gov-breadcrumb-item>
</gov-breadcrumb>
<hr />
<gov-breadcrumb>
<gov-breadcrumb-item><a href="/">首页</a></gov-breadcrumb-item>
<gov-breadcrumb-item>企业列表</gov-breadcrumb-item>
<gov-breadcrumb-item>企业详情</gov-breadcrumb-item>
</gov-breadcrumb>
<hr />
<gov-breadcrumb size="small">
<gov-breadcrumb-item><a href="/">首页</a></gov-breadcrumb-item>
<gov-breadcrumb-item>企业列表</gov-breadcrumb-item>
<gov-breadcrumb-item>企业详情</gov-breadcrumb-item>
</gov-breadcrumb>
</demo-container>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
修改图标
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleClick">修改为双箭头</gov-button>
<hr />
<gov-breadcrumb :icon="icon">
<gov-breadcrumb-item><a href="/">首页</a></gov-breadcrumb-item>
<gov-breadcrumb-item>企业列表</gov-breadcrumb-item>
<gov-breadcrumb-item>企业详情</gov-breadcrumb-item>
</gov-breadcrumb>
</demo-container>
</template>
<script setup>
import { ref } from "vue";
const icon = ref();
const handleClick = () => {
icon.value = "d-arrow-right";
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Breadcrumb Attributes
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| icon | 面包屑图标 | String | — | arrow-right |
| size | 面包屑大小 | String | large，default，small | default |
Breadcrumb Slots
| 插槽名 | 说明 |
|---|---|
| default | 存放 BreadcrumbItem 组件。 |