Skip to content

Commit 96b1caf

Browse files
kouchaokouchao
committed
新增 tabs
1 parent e2dd3a1 commit 96b1caf

File tree

10 files changed

+209
-74
lines changed

10 files changed

+209
-74
lines changed

‎src/App.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
<lay-menu-child-item title="按钮" :to="{name: 'button'}"></lay-menu-child-item>
6969
<lay-menu-child-item title="表单" :to="{name: 'form'}"></lay-menu-child-item>
7070
<lay-menu-child-item title="导航/面包屑" :to="{name: 'nav'}"></lay-menu-child-item>
71+
<lay-menu-child-item title="选项卡" :to="{name: 'tabs'}"></lay-menu-child-item>
7172
<lay-menu-child-item title="进度条" :to="{name: 'progress'}"></lay-menu-child-item>
7273
<lay-menu-child-item title="面板" :to="{name: 'panel'}"></lay-menu-child-item>
7374
<lay-menu-child-item title="徽章" :to="{name: 'badge'}"></lay-menu-child-item>

‎src/components/tab-pane/index.js

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

‎src/components/tabs/index.js

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

‎src/components/tabs/src/tab-pane.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div class="layui-tab-item"
3+
:class="{
4+
'layui-show': name == $parent.value
5+
}">
6+
<slot></slot>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: 'LayTabPane',
13+
props: {
14+
title: String,
15+
name: String
16+
}
17+
}
18+
</script>
19+
20+
<style scoped>
21+
22+
</style>

‎src/components/tabs/src/tabs.vue

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<div class="layui-tab">
3+
<ul class="layui-tab-title">
4+
<li v-for="item in titles"
5+
:class="{
6+
'layui-this': value == item.name
7+
}"
8+
@click="handleClick(item.name)">
9+
{{item.title}}
10+
<i v-if="closable"
11+
class="layui-icon layui-unselect layui-tab-close layui-icon-close"
12+
@click.stop="handleClose(item.name)"></i>
13+
</li>
14+
15+
</ul>
16+
<div class="layui-tab-content">
17+
<slot></slot>
18+
</div>
19+
20+
</div>
21+
22+
</template>
23+
24+
<script>
25+
export default {
26+
name: 'LayTabs',
27+
props: {
28+
activeName: String,
29+
value: String,
30+
closable: {
31+
type: Boolean,
32+
default() {
33+
return false
34+
}
35+
}
36+
},
37+
data(){
38+
return {
39+
titles: []
40+
}
41+
42+
},
43+
methods: {
44+
handleClick(value){
45+
this.$emit('input', value)
46+
},
47+
handleClose(value){
48+
this.titles = this.titles.filter(o => o.name != value)
49+
this.value = this.titles.length ? this.titles[0].name : ''
50+
this.$emit('close', value)
51+
}
52+
},
53+
mounted() {
54+
this.slots = this.$slots
55+
this.titles = this.$slots.default.map(o => {
56+
return {
57+
title: o.child.title,
58+
name: o.child.name
59+
}
60+
})
61+
},
62+
watch: {
63+
value(){
64+
this.$emit('input', this.value)
65+
}
66+
67+
}
68+
}
69+
</script>
70+
71+
<style scoped>
72+
i.right {
73+
padding-left: 4px;
74+
}
75+
76+
i.left {
77+
padding-right: 4px;
78+
}
79+
80+
</style>

‎src/components/tabs/tab-pane.vue

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/components/tabs/tabs.vue

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎src/index.js

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,19 @@
55
import LayRow from '@/components/row'
66
import LayCol from '@/components/col'
77
import LayContainer from '@/components/container'
8-
98
import LayButton from '@/components/button'
109
import LayButtonGroup from '@/components/button-group'
1110
import LayButtonContainer from '@/components/button-container'
12-
1311
import LayForm from '@/components/form'
1412
import LayFormItem from '@/components/form-item'
1513
import LayRadio from '@/components/radio'
1614
import LayInput from '@/components/input'
1715
import LayCheckbox from '@/components/checkbox'
1816
import LaySelect from '@/components/select'
1917
import LayTextarea from '@/components/textarea'
20-
21-
import tabs from '@/components/tabs/tabs'
22-
import tabPane from '@/components/tabs/tab-pane'
23-
18+
import LayTabs from '@/components/tabs'
19+
import LayTabPane from '@/components/tab-pane'
2420
import LayLine from '@/components/line'
25-
2621
import LayMenu from '@/components/menu'
2722
import LayMenuItem from '@/components/menu-item'
2823
import LayMenuChildItem from '@/components/menu-child-item'
@@ -67,10 +62,9 @@ const layui = {
6762
LayCheckbox,
6863
LaySelect,
6964
LayTextarea,
70-
tabs,
71-
tabPane,
65+
LayTabs,
66+
LayTabPane,
7267
LayLine,
73-
7468
LayMenu,
7569
LayMenuItem,
7670
LayMenuChildItem,

‎src/router.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Progress from './views/Progress.vue'
1212
import Panel from './views/Panel.vue'
1313
import Timeline from './views/Timeline.vue'
1414
import Table from './views/Table.vue'
15+
import Tabs from './views/Tabs.vue'
1516

1617
Vue.use(Router)
1718

@@ -76,6 +77,11 @@ export default new Router({
7677
path: '/table',
7778
name: 'table',
7879
component: Table
80+
},
81+
{
82+
path: '/tabs',
83+
name: 'tabs',
84+
component: Tabs
7985
}
8086

8187

‎src/views/Tabs.vue

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div>
3+
<lay-block title="默认风格的Tab"></lay-block>
4+
<lay-tabs v-model="activeName">
5+
<lay-tab-pane title="网站设置" name="first">
6+
1. 高度默认自适应，也可以随意固宽。
7+
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
8+
</lay-tab-pane>
9+
<lay-tab-pane title="用户管理" name="second">
10+
内容2
11+
</lay-tab-pane>
12+
<lay-tab-pane title="权限分配" name="third">
13+
内容3
14+
</lay-tab-pane>
15+
<lay-tab-pane title="商品管理" name="fourth">
16+
内容4
17+
</lay-tab-pane>
18+
<lay-tab-pane title="订单管理" name="fifth">
19+
内容5
20+
</lay-tab-pane>
21+
</lay-tabs>
22+
<lay-block title="动态操作Tab" style="margin-top: 50px;"></lay-block>
23+
<lay-tabs v-model="activeName" closable @close="handleClose">
24+
<lay-tab-pane v-for="item in tabs" :title="item.title" :name="item.name">
25+
{{item.content}}
26+
</lay-tab-pane>
27+
28+
</lay-tabs>
29+
<!--<lay-button @click="handleAddTab">新增Tab项</lay-button>-->
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
name: "Tabs",
36+
data(){
37+
return {
38+
activeName: 'first',
39+
tabs: [{
40+
name: 'first',
41+
title: '网站设置',
42+
content: '内容1'
43+
}, {
44+
name: 'second',
45+
title: '用户管理',
46+
content: '内容2'
47+
}, {
48+
name: 'third',
49+
title: '权限分配',
50+
content: '内容3'
51+
}]
52+
}
53+
},
54+
methods: {
55+
handleClose(value){
56+
console.log(value)
57+
58+
},
59+
handleAddTab(){
60+
this.tabs.push({
61+
name: 'second' + 1,
62+
title: '用户管理',
63+
content: '内容2'
64+
})
65+
}
66+
}
67+
}
68+
</script>
69+
70+
<style scoped>
71+
72+
</style>

0 commit comments

Comments
 (0)