本文实例为大家分享了vue组件开发之tab切换组件的具体使用代码，供大家参考，具体内容如下
代码：
|
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
86
87
88
89
90
|
<template> <div class="tab-slider"> <div class="tab"> <span v-for="(item, index) in items" v-bind:class="{active: actived == index}" @click="toggle(index)">{{item.tab}}</span> </div> <div class="tab-content"> <div class="wrapbox clearboth"> <div class="item" v-for="(item, index) in items">{{item.tabContent}}</div> </div> </div> </div></template><script> export default { name: 'tabSlider', data (){ return { actived: 0, items: [{ 'tab': 'tab1', 'tabContent': 'content1' },{ 'tab': 'tab2', 'tabContent': 'content2' },{ 'tab': 'tab3', 'tabContent': 'content3' },{ 'tab': 'tab4', 'tabContent': 'content4' }] } }, methods: { //获取图片base64实现预览 toggle(index){ this.actived = index; document.querySelector(".tab-content .wrapbox").style.webkitTransform = "translateX(-" + (this.actived * 400) + "px)"; } } }</script><style scoped> *{margin:0 auto;padding:0;font-family:"微软雅黑";} .clearboth::after{ content:""; display:block; clear:both; } .tab-slider{ height:auto; width:400px; margin:50px auto; } .tab-slider .tab{ display:flex; height:40px; line-height:40px; background:#ccc; } .tab-slider .tab span{ display:block; width:100%; text-align:center; cursor:default; } .tab-slider .tab .active{ background:red; } .tab-slider .tab-content{ height:300px; width:400px; overflow:hidden; } .tab-slider .tab-content .item{ float:left; height:300px; width:400px; line-height:300px; text-align:center; font-size:60px; background:#eee; } .tab-slider .wrapbox{ width:2000px; transition: all 1s; }</style> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/CodingNoob/article/details/80102139
