# bz-breadcrumb 面包屑
# 基本用法
面包屑由 bz-breadcrumb 和 bz-breadcrumb-item 构成
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-content">
<view class="demo-title">bz-breadcrumb 面包屑</view>
<demo-cell title="默认使用">
<bz-breadcrumb>
<bz-breadcrumb-item
v-for="(item, index) in params.dataList"
:key="`${item}${index}`"
:onClick="() => onClick(index)"
>{{ item }}</bz-breadcrumb-item
>
</bz-breadcrumb>
</demo-cell>
<demo-cell title="自定义分割符/颜色">
<bz-breadcrumb :separator="'/'" color="#5d68e8">
<bz-breadcrumb-item
v-for="(item, index) in params.dataList"
:key="`${item}${index}`"
@click="onClick(index)"
>{{ item }}</bz-breadcrumb-item
>
</bz-breadcrumb>
</demo-cell>
<demo-cell title="自定义可点项">
<bz-breadcrumb>
<bz-breadcrumb-item @click="() => onClick(0)"
>头号</bz-breadcrumb-item
>
<bz-breadcrumb-item :isAction="true">次要</bz-breadcrumb-item>
<bz-breadcrumb-item :isAction="true">次要</bz-breadcrumb-item>
<bz-breadcrumb-item :isAction="true">次次要</bz-breadcrumb-item>
<bz-breadcrumb-item :isAction="true">次次次要</bz-breadcrumb-item>
<bz-breadcrumb-item :isAction="true">次次次次要</bz-breadcrumb-item>
<bz-breadcrumb-item :isAction="true">次次次次次要</bz-breadcrumb-item>
<bz-breadcrumb-item :isAction="false">再次</bz-breadcrumb-item>
<bz-breadcrumb-item :isAction="true">新增</bz-breadcrumb-item>
</bz-breadcrumb>
</demo-cell>
</view>
</view>
</template>
<script>
export default {
data() {
return {
params: {
separator: ">",
color: "#1890ff",
dataList: ["头号", "次要", "再次", "新增"],
},
};
},
methods: {
onClick(index) {
console.log("onClick", index);
const arr = this.params.dataList;
if (index !== arr.length - 1) {
this.params.dataList = arr.slice(0, index + 1);
console.log(this.params.dataList);
}
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
展开 刷新 关闭
# 属性说明
# Breadcrumb Props
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| separator | String | '>' | - | 分隔符 |
| color | String | 蓝色 | - | 主题颜色 |
# BreadcrumbItem Props
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| isAction | Boolean | - | - | 是否可点击(此项对最后一项不生效，最后一项一定为不可以点击态) |
| @click | Handler | - | - | 点击当前 item 的回调方法 |