Skip to content

Commit bd74630

Browse files
kouchaokouchao
committed
新增 导航菜单demo，新增 组件徽章、面包屑，新增 菜单组件主题
1 parent bc26eec commit bd74630

File tree

11 files changed

+451
-36
lines changed

11 files changed

+451
-36
lines changed

‎src/App.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@
6565
<span>基本元素</span>
6666
</template>
6767
<lay-menu-child-item title="按钮" :to="{name: 'button'}"></lay-menu-child-item>
68-
<lay-menu-child-item title="表单" :to="{name: 'form'}"></lay-menu-child-item>
68+
<lay-menu-child-item title="表单" :to="{name: 'form'}"></lay-menu-child-item>
69+
<lay-menu-child-item title="导航/面包屑" :to="{name: 'nav'}"></lay-menu-child-item>
6970

7071
</lay-menu-item>
7172
</lay-menu>

‎src/components/badge/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/8/27
3+
*/
4+
5+
import LayBadge from './src/badge';
6+
7+
/* istanbul ignore next */
8+
LayBadge.install = function(Vue) {
9+
Vue.component(LayBadge.name, LayBadge);
10+
};
11+
12+
export default LayBadge;

‎src/components/badge/src/badge.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<span :class="classList" :style="styleList">
3+
<slot v-if="type != 'dot'"></slot>
4+
</span>
5+
</template>
6+
<script>
7+
export default {
8+
name: 'LayBadge',
9+
props: {
10+
type: String,
11+
theme: String,
12+
color: String
13+
},
14+
data(){
15+
return {
16+
classList: [{
17+
'layui-badge': !this.type,
18+
'layui-badge-dot': this.type == 'dot',
19+
'layui-badge-rim': this.type == 'rim',
20+
},
21+
'layui-bg-' + this.theme],
22+
styleList: this.color ? 'background-color: ' + this.color : ''
23+
}
24+
}
25+
}
26+
</script>

‎src/components/breadcrumb-item/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/8/27
3+
*/
4+
5+
import LayBreadcrumbItem from '../breadcrumb/src/breadcrumb-item';
6+
7+
/* istanbul ignore next */
8+
LayBreadcrumbItem.install = function(Vue) {
9+
Vue.component(LayBreadcrumbItem.name, LayBreadcrumbItem);
10+
};
11+
12+
export default LayBreadcrumbItem;

‎src/components/breadcrumb/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/8/27
3+
*/
4+
5+
import LayBreadcrumb from './src/breadcrumb';
6+
7+
/* istanbul ignore next */
8+
LayBreadcrumb.install = function(Vue) {
9+
Vue.component(LayBreadcrumb.name, LayBreadcrumb);
10+
};
11+
12+
export default LayBreadcrumb;

‎src/components/breadcrumb/src/breadcrumb-item.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<span class="layui-breadcrumb-item">
3+
<a href="javascript:void(0);" @click="handleClick">
4+
<slot></slot>
5+
</a>
6+
<span lay-separator="" class="separator">{{layBreadcrumb.separator}}</span>
7+
</span>
8+
9+
</template>
10+
<script>
11+
export default {
12+
name: 'LayBreadcrumbItem',
13+
inject: ['layBreadcrumb'],
14+
props: {
15+
to: Object
16+
},
17+
methods: {
18+
handleClick() {
19+
if(this.$route && this.to){
20+
this.$router.push(this.to)
21+
}
22+
}
23+
}
24+
}
25+
</script>

‎src/components/breadcrumb/src/breadcrumb.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<span class="layui-breadcrumb" style="visibility: visible;">
3+
<slot></slot>
4+
</span>
5+
</template>
6+
<script>
7+
export default {
8+
name: 'LayBreadcrumb',
9+
props: {
10+
separator: {
11+
type: String,
12+
default(){
13+
return '/'
14+
}
15+
}
16+
},
17+
provide() {
18+
return {
19+
layBreadcrumb: this
20+
};
21+
},
22+
mounted() {
23+
const items = this.$el.querySelectorAll('.layui-breadcrumb-item .separator');
24+
if (items.length) {
25+
items[items.length - 1].style.display = 'none'
26+
}
27+
}
28+
}
29+
</script>
30+
31+
<style scoped>
32+
33+
</style>

‎src/components/menu/src/menu.vue

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<ul class="layui-nav"
3-
:class="{
4-
'layui-nav-tree': this.mode == 'vertical'
5-
}">
3+
:class="classList"
4+
:style="styleList">
65
<slot></slot>
76
</ul>
87
</template>
@@ -12,46 +11,54 @@
1211
1312
export default {
1413
name: "LayMenu",
15-
data() {
16-
return {
17-
openeds: this.defaultOpeneds
18-
}
19-
},
20-
props: {
14+
data() {
15+
return {
16+
openeds: this.defaultOpeneds,
17+
classList: [{
18+
'layui-nav-tree': this.mode == 'vertical'
19+
},
20+
'layui-bg-' + this.theme
21+
],
22+
styleList: this.color ? 'background-color: ' + this.color : ''
23+
}
24+
},
25+
props: {
2126
// horizontal / vertical
22-
mode: {
23-
type: String,
24-
default: 'vertical',
25-
},
26-
defaultOpeneds: {
27-
type: Array,
28-
default() {
29-
return []
30-
},
31-
},
32-
uniqueOpened: {
33-
type: Boolean,
34-
default: false
35-
}
36-
},
27+
mode: {
28+
type: String,
29+
default: 'vertical',
30+
},
31+
defaultOpeneds: {
32+
type: Array,
33+
default() {
34+
return []
35+
},
36+
},
37+
uniqueOpened: {
38+
type: Boolean,
39+
default: false
40+
},
41+
theme: String,
42+
color: String
43+
},
3744
mixins: [eventHub],
3845
provide() {
3946
return {
4047
rootMenu: this
4148
};
4249
},
4350
methods: {
44-
handleItemClick(item) {
45-
const {index} = item
46-
const activeIndex = this.openeds.findIndex(o => o == index)
47-
if(activeIndex == -1){
48-
this.uniqueOpened ? this.openeds = [index] : this.openeds.push(index)
49-
} else {
50-
this.openeds.splice(activeIndex, 1)
51-
}
51+
handleItemClick(item) {
52+
const {index} = item
53+
const activeIndex = this.openeds.findIndex(o => o == index)
54+
if (activeIndex == -1) {
55+
this.uniqueOpened ? this.openeds = [index] : this.openeds.push(index)
56+
} else {
57+
this.openeds.splice(activeIndex, 1)
58+
}
5259
53-
}
54-
},
60+
}
61+
},
5562
mounted() {
5663
this.eventOn('menu-item-click', this.handleItemClick);
5764
}

‎src/index.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
* kouchao 创建于 2018/8/27
33
*/
44

5-
65
import LayRow from '@/components/row'
76
import LayCol from '@/components/col'
87
import LayContainer from '@/components/container'
@@ -34,6 +33,9 @@ import LaySide from '@/components/side'
3433
import LayBody from '@/components/body'
3534
import LayFooter from '@/components/footer'
3635
import LayBlock from '@/components/block'
36+
import LayBadge from '@/components/badge'
37+
import LayBreadcrumb from '@/components/breadcrumb'
38+
import LayBreadcrumbItem from '@/components/breadcrumb-item'
3739

3840

3941

@@ -71,6 +73,9 @@ const layui = {
7173
LayBody,
7274
LayFooter,
7375
LayBlock,
76+
LayBadge,
77+
LayBreadcrumb,
78+
LayBreadcrumbItem,
7479
]
7580
components.forEach(function (component) {
7681
Vue.component(component.name, component)

‎src/router.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import About from './views/About.vue'
55
import Grid from './views/Grid.vue'
66
import Button from './views/Button.vue'
77
import Form from './views/Form.vue'
8+
import Nav from './views/Nav.vue'
89

910
Vue.use(Router)
1011

@@ -34,8 +35,15 @@ export default new Router({
3435
path: '/form',
3536
name: 'form',
3637
component: Form
38+
},
39+
{
40+
path: '/nav',
41+
name: 'nav',
42+
component: Nav
3743
}
3844

3945

46+
47+
4048
]
4149
})

0 commit comments

Comments
 (0)