使用Vue开发Tabs组件(一)

前言

组件毫无疑问在Vue中是无比重要的,一个页面就是由各个组件组成,可以说是面向组件开发了。博主使用Vue也将近一年了,工作中也封装过一些简单组件,但从未有一篇详细的文章记录下整个思想过程。于是就想写下该文章记录一个Tabs组件的封装。

准备工作

封装Tabs组件我这里先从最底层做起,先用 Html + JQuery 实现了一遍,然后根据已经实现的去进行拆分。

基本的Html代码为:

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
<div class="tab">
<div class="tab-header">
<ul class="tab-item">
<li class="tab-item-title active">
<a href="#">Tab1</a>
</li>
<li class="tab-item-title">
<a href="#">Tab2</a>
</li>
<li class="tab-item-title">
<a href="#">Tab3</a>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="tab-panel">
<div class="tab-panel-content active">
<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>
</div>
<div class="tab-panel-content">
<h1>我的第二个标题</h1>

<p>我的第二个段落。</p>
</div>
<div class="tab-panel-content">
<h1>我的第三个标题</h1>

<p>我的第三个段落。</p>
</div>
</div>
</div>

这里头部 Tab 使用 ul li 标签去实现,并且里面使用 a 标签去包裹着标题,方便之后事件操作使用。

css代码

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
77
78
79
80
81
82
83
84
85
html,
body {
height: 100%;
padding: 0;
margin: 0;
}

a {
text-decoration: none;
}

a:visited {
color: #000;
}

.clear {
clear: both;
}

.tab-item {
list-style: none;
padding-inline-start: 0;
}

.tab-item>.tab-item-title {
position: relative;
float: left;
padding: 10px 15px;
text-align: center;
font-weight: 500;
color: #000;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.tab-item>.tab-item-title.active {
color: #1890ff;
}

.tab-item>.tab-item-title.active::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
transition: width .2s;
background: #1890ff;
}

.tab-item>.tab-item-title::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
}

.tab-item>.tab-item-title.active>a {
color: #1890ff;
}

.tab-panel {
display: flex;
overflow: hidden;
padding: 0 15px;
}

.tab-panel-content {
height: 0;
padding: 0 !important;
overflow: hidden;
opacity: 0;
pointer-events: none;
flex-shrink: 0;
width: 0;
-webkit-transition: opacity .45s;
transition: opacity .45s;
}

.tab-panel-content.active {
height: auto;
opacity: 1;
width: 100%;
}

js代码为

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
(function () {

var Tab = function () {
this._$tabItem = $('.tab-item').find('.tab-item-title');
this._$tabPanel = $('.tab-panel').find('.tab-panel-content');
this._selectIndex = 0;
return this.init();
}
Tab.prototype = {
changeTab: function (index) {
this._$tabItem.removeClass('active');
this._$tabPanel.removeClass('active')
this._$tabItem.eq(index).addClass('active');
this._$tabPanel.eq(index).addClass('active')
},
selectedIndex() {
return this._selectIndex;
},
init: function () {
var _this = this;
this._$tabItem.click(function () {
_this.changeTab($(this).index());
_this._selectIndex = $(this).index();
});
return _this;
}
}
var tab = new Tab();
})()

呈现效果
效果

以上就是基本的 Tab 组件 Html + JQuery的基本实现,很简单的一个实现,接下来就要使用Vue去进行改写。