Skip to content

Commit 1ca2612

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

File tree

2 files changed

+99
-41
lines changed

2 files changed

+99
-41
lines changed

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

Lines changed: 46 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,33 @@
11
<template>
2-
<div class="layui-tab">
3-
<ul class="layui-tab-title">
4-
<li v-for="item in titles"
2+
<div class="layui-tab"
3+
:class="{
4+
'layui-tab-brief': skin == 'simple',
5+
'layui-tab-card': skin == 'card'
6+
}"
7+
:style="width ? 'width: ' + width + 'px' : ''"
8+
:overflow="overflow">
9+
<ul class="layui-tab-title"
10+
:class="{
11+
'layui-tab-more': isOpen
12+
}"
13+
v-if="$slots.default">
14+
<li v-for="item in $slots.default.map(o => o.componentOptions.propsData)"
515
:class="{
616
'layui-this': value == item.name
717
}"
818
@click="handleClick(item.name)">
919
{{item.title}}
1020
<i v-if="closable"
1121
class="layui-icon layui-unselect layui-tab-close layui-icon-close"
12-
@click.stop="handleClose(item.name)"></i>
22+
@click.stop="handleClose(item.name)"></i>
1323
</li>
14-
24+
<span v-if="overflow" class="layui-unselect layui-tab-bar" lay-stope="tabmore" @click="handleOpen">
25+
<i v-if="isOpen" lay-stope="tabmore" class="layui-icon layui-icon-up"></i>
26+
<i v-else lay-stope="tabmore" class="layui-icon layui-icon-down"></i>
27+
</span>
1528
</ul>
16-
<div class="layui-tab-content">
29+
<div class="layui-tab-content"
30+
:style="height ? 'height: ' + height + 'px' : ''">
1731
<slot></slot>
1832
</div>
1933

@@ -29,42 +43,38 @@
2943
value: String,
3044
closable: {
3145
type: Boolean,
32-
default() {
46+
default() {
3347
return false
34-
}
35-
}
36-
},
37-
data(){
48+
}
49+
},
50+
skin: String,
51+
overflow: Boolean,
52+
height: Number,
53+
width: Number
54+
},
55+
data() {
3856
return {
39-
titles: []
57+
isOpen: false
58+
}
59+
},
60+
methods: {
61+
handleClick(value) {
62+
this.$emit('input', value)
63+
},
64+
handleClose(value) {
65+
this.$emit('close', value)
66+
},
67+
handleOpen(){
68+
this.isOpen = !this.isOpen
4069
}
4170
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-
})
6171
},
62-
watch: {
63-
value(){
64-
this.$emit('input', this.value)
65-
}
72+
watch: {
73+
value() {
74+
this.$emit('input', this.value)
75+
}
6676
67-
}
77+
}
6878
}
6979
</script>
7080

‎src/views/Tabs.vue

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,54 @@
2424
<lay-tab-pane v-for="item in tabs" :title="item.title" :name="item.name">
2525
{{item.content}}
2626
</lay-tab-pane>
27+
</lay-tabs>
28+
<lay-button @click="handleAddTab">新增Tab项</lay-button>
29+
<lay-button @click="handleClose('fourth')">删除: 商品管理</lay-button>
30+
<lay-button @click="activeName = 'second'">切换到: 用户管理</lay-button>
31+
32+
<lay-block title="Hash地址定位" style="margin-top: 50px;"></lay-block>
33+
设置activeName即可
34+
35+
<lay-block title="简洁风格的Tab" style="margin-top: 50px;"></lay-block>
36+
<lay-tabs v-model="activeName"
37+
skin="simple">
38+
<lay-tab-pane v-for="item in tabs" :title="item.title" :name="item.name">
39+
{{item.content}}
40+
</lay-tab-pane>
41+
</lay-tabs>
42+
43+
<lay-block title="卡片风格的Tab" style="margin-top: 50px;"></lay-block>
44+
<lay-tabs v-model="activeName"
45+
skin="card">
46+
<lay-tab-pane v-for="item in tabs" :title="item.title" :name="item.name">
47+
{{item.content}}
48+
</lay-tab-pane>
49+
</lay-tabs>
2750

51+
<lay-block title="当Tab数超过一定宽度" style="margin-top: 50px;"></lay-block>
52+
<lay-tabs v-model="activeName"
53+
skin="card"
54+
:width="300"
55+
overflow>
56+
<lay-tab-pane v-for="item in tabs" :title="item.title" :name="item.name">
57+
{{item.content}}
58+
</lay-tab-pane>
59+
</lay-tabs>
60+
<lay-block title="带删除功能的Tab" style="margin-top: 50px;"></lay-block>
61+
<lay-tabs v-model="activeName"
62+
skin="card"
63+
closable
64+
:height="200"
65+
@close="handleClose">
66+
<lay-tab-pane v-for="item in tabs" :title="item.title" :name="item.name">
67+
{{item.content}}
68+
</lay-tab-pane>
2869
</lay-tabs>
29-
<!--<lay-button @click="handleAddTab">新增Tab项</lay-button>-->
3070
</div>
3171
</template>
3272

3373
<script>
74+
let count = 0
3475
export default {
3576
name: "Tabs",
3677
data(){
@@ -48,19 +89,26 @@
4889
name: 'third',
4990
title: '权限分配',
5091
content: '内容3'
92+
}, {
93+
name: 'fourth',
94+
title: '商品管理',
95+
content: '内容4'
5196
}]
5297
}
5398
},
5499
methods: {
55100
handleClose(value){
56-
console.log(value)
101+
this.tabs = this.tabs.filter(o => o.name != value)
57102
103+
if(this.activeName == value){
104+
this.activeName = this.tabs.length ? this.tabs[0].name : ''
105+
}
58106
},
59107
handleAddTab(){
60108
this.tabs.push({
61-
name: 'second' + 1,
62-
title: '用户管理',
63-
content: '内容2'
109+
name: 'tab' + count,
110+
title: 'tab' + count,
111+
content: 'tab' + count++
64112
})
65113
}
66114
}

0 commit comments

Comments
 (0)