/
VBreadcrumbs.ts
76 lines (61 loc) 路 1.57 KB
/
VBreadcrumbs.ts
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
67
68
69
70
71
72
73
74
75
76
// Styles
import './VBreadcrumbs.sass'
// Types
import { VNode, PropType } from 'vue'
// Components
import VBreadcrumbsItem from './VBreadcrumbsItem'
import VBreadcrumbsDivider from './VBreadcrumbsDivider'
// Mixins
import Themeable from '../../mixins/themeable'
// Utils
import mixins from '../../util/mixins'
export default mixins(
Themeable
/* @vue/component */
).extend({
name: 'v-breadcrumbs',
props: {
divider: {
type: String,
default: '/',
},
items: {
type: Array as PropType<any[]>,
default: () => ([]),
},
large: Boolean,
},
computed: {
classes (): object {
return {
'v-breadcrumbs--large': this.large,
...this.themeClasses,
}
},
},
methods: {
genDivider () {
return this.$createElement(VBreadcrumbsDivider, this.$slots.divider ? this.$slots.divider : this.divider)
},
genItems () {
const items = []
const hasSlot = !!this.$scopedSlots.item
const keys = []
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i]
keys.push(item.text)
if (hasSlot) items.push(this.$scopedSlots.item!({ item }))
else items.push(this.$createElement(VBreadcrumbsItem, { key: keys.join('.'), props: item }, [item.text]))
if (i < this.items.length - 1) items.push(this.genDivider())
}
return items
},
},
render (h): VNode {
const children = this.$slots.default || this.genItems()
return h('ul', {
staticClass: 'v-breadcrumbs',
class: this.classes,
}, children)
},
})