选项
Quicktab插件默认全部选项
js
const DEFAULT = {
//最小高度
minHeight: undefined,
//高度
height: undefined,
//宽
width: undefined,
//本土化
lang: undefined,
//缓存类型 可用值: "session" "local"
cacheType: 'local',
// 响应式设置(是针对的父容器)
responsive: {
enable: true,
// 断点视口
breakpoint: 576,
// 小设备时想要隐藏的工具栏上的按钮 值是prev、refresh、next、fullscreen、dropdown
hide: ['prev', 'refresh', 'next', 'fullscreen'],
},
//默认tab
defaultTabs: [],
//tab工具栏配置
toolbar: {
//是否隐藏工具栏
hide: false,
//位置 top:在顶部,bottom:在底部
position: 'top',
// 左滚动
prev: {
enable: true,
icon: Icons.caretLeft,
order: 10,
},
// 刷新
refresh: {
enable: false,
icon: Icons.arrowClockwise,
order: 20,
},
// tab包裹区域
tabWrapper: {
order: 30,
},
// 右滚动
next: {
enable: true,
icon: Icons.caretRight,
order: 40,
},
// 搜索tab、打开的标签、最近关闭的标签
dropdown: {
enable: false,
icon: Icons.caretDown,
order: 50,
// 搜索框部分的配置
searchInput: {
placeholder: '',
prefixIcon: Icons.search,
},
//打开tab部分的配置
openedTabs: {
text: '',
//每个tab条目右边的关闭按钮图标
closeIcon: Icons.x,
},
// 最近关闭的tab部分的配置
recentlyClosedTabs: {
text: '',
showIcon: Icons.caretDownFill,
hideIcon: Icons.caretUpFill,
},
//每个tab条目时间格式化
timeFormat: {
year: '',
months: '',
days: '',
hours: '',
minutes: '',
seconds: '',
},
//没有搜索结果时的提示文本
emptyText: '',
},
// 全屏
fullscreen: {
enable: false,
//图标
icon: Icons.fullscreen,
//排序
order: 60,
},
},
//tab配置
tab: {
//记忆(刷新tab不丢失)
remember: false,
//右键菜单配置
contextmenu: {
enable: false,
// 关闭当前
close: {
enable: true,
text: '',
order: 10,
separator: false,
},
// 关闭其它
closeOthers: {
enable: true,
text: '',
order: 20,
separator: false,
},
// 关闭左侧
closePrev: {
enable: true,
text: '',
order: 30,
separator: false,
},
// 关闭右侧
closeNext: {
enable: true,
text: '',
order: 40,
separator: false,
},
// 关闭全部
closeAll: {
enable: true,
text: '',
order: 50,
separator: false,
},
// 全屏显示
fullscreen: {
enable: true,
text: '',
order: 60,
separator: true,
},
// 重新加载
refresh: {
enable: true,
text: '',
order: 70,
separator: false,
},
// 激活居中
centerActive: {
enable: true,
text: '',
order: 80,
separator: false,
},
// 新选项卡打开
newBlank: {
enable: true,
text: '',
order: 90,
separator: false,
},
},
//鼠标滚轮切换tab
mouseWheelSwitch: {
enable: false,
// 只是滚动tab的包裹区域 true:启用 false:不启用
onlyScroll: false,
},
//最大数量 -1:表示无限制
maxNum: -1,
//关闭按钮
closeBtn: {
enable: true,
//关闭按钮是否鼠标移入时才显示 true:启用 false:始终显示
showOnHover: false,
icon: Icons.x,
},
//当插件宽高改变时,当前激活的tab是否居中 false:不启用 true:启用
resizeCenterActive: false,
//tab单击时自动居中 false:不启用 true:启用
clickCenterActive: false,
//双击功能
doubleClick: {
enable: false,
//默认tab双击是刷新功能,您也可以关闭刷新,在onTabDoubleClick事件中执行自己的逻辑
refresh: true
},
//tab是否可以拖动排序 false:不启用 true:启用
dragSort: false,
//超时设置
timeout: {
enable: true,
//过滤器 func 可以对于一些特定的tab不启用超时
filter(url) {
return true
},
//超时时的提示文本
text: '',
//超时时间
second: 3000,
//超时自定义模板
template: '',
},
//tab加载层效果
loading: {
enable: true,
//过滤器,可以对于一些特定的tab不启用loading
filter(url) {
return true
},
//自定义加载模板
template: '',
},
},
//tab被激活的事件
onTabActivated(url) {
return false
},
//tab加载完毕事件
onTabLoaded(url) {
return false
},
//tab加载超时事件
onTabTimeout(url) {
return false
},
//tab加载完毕或超时都会触发的事件
onTabFinally(url) {
return false
},
//页面上所有的tab都完成事件(假如此时网速较慢,当前面一个tab还没有到Finally阶段的时候又重新开了一个tab,它会等待所有的tab都加载完毕或者超时后触发)
onTabAll() {
return false
},
//tab加载层过渡完毕的事件,该事件需要tab配置项loading被启用才会执行回调。
onTabLoadingTransitionend(url) {
return false
},
//tab被点击回调事件
onTabClick(url) {
return false
},
//tab被双击回调事件
onTabDoubleClick(url) {
return false
},
//tab被关闭的事件
onTabClose(url) {
return false
},
//所有的tab都被关闭的事件
onTabCloseAll() {
return false
},
//实例化完毕回调
onInit() {
return false
},
}
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
单Tab默认选项
js
const tabDefault = {
//标题
title: '新标签页',
// 地址
url: '',
//可否关闭
closable: true
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8