@kaiyinchem/ky-uniui 1.1.11 → 1.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ky-tab.vue +19 -9
- package/package.json +1 -1
package/components/ky-tab.vue
CHANGED
|
@@ -29,7 +29,12 @@
|
|
|
29
29
|
</view>
|
|
30
30
|
<view
|
|
31
31
|
v-if="tabItemWidth > 0 && !hasIcon"
|
|
32
|
-
:style="{
|
|
32
|
+
:style="{
|
|
33
|
+
left: tabItemOffsetLeft + 'px',
|
|
34
|
+
width: tabItemWidth + 'px',
|
|
35
|
+
height: tabItemHeight + 'px',
|
|
36
|
+
'background-color': activeColor
|
|
37
|
+
}"
|
|
33
38
|
class="ky-tab-slider"
|
|
34
39
|
>
|
|
35
40
|
</view>
|
|
@@ -98,6 +103,7 @@
|
|
|
98
103
|
return {
|
|
99
104
|
tabItemOffsetLeft: 0,
|
|
100
105
|
tabItemWidth: 0,
|
|
106
|
+
tabItemHeight: 2,
|
|
101
107
|
tabIndex: 0,
|
|
102
108
|
}
|
|
103
109
|
},
|
|
@@ -137,6 +143,9 @@
|
|
|
137
143
|
parent.boundingClientRect(data => {
|
|
138
144
|
this.tabItemWidth = data.width
|
|
139
145
|
this.tabItemOffsetLeft = data.left
|
|
146
|
+
if (this.type === 'card') {
|
|
147
|
+
this.tabItemHeight = data.height
|
|
148
|
+
}
|
|
140
149
|
if (this.tabIndex === index) {
|
|
141
150
|
return
|
|
142
151
|
}
|
|
@@ -184,13 +193,12 @@
|
|
|
184
193
|
justify-content: center;
|
|
185
194
|
border-right: 1px solid var(--color-primary);
|
|
186
195
|
box-sizing: border-box;
|
|
187
|
-
&:last-child {
|
|
188
|
-
border-right: 0;
|
|
189
|
-
}
|
|
190
196
|
&.active {
|
|
191
|
-
background: var(--color-primary);
|
|
192
197
|
color: #ffffff;
|
|
193
198
|
}
|
|
199
|
+
&:last-child {
|
|
200
|
+
border-right: 0;
|
|
201
|
+
}
|
|
194
202
|
}
|
|
195
203
|
}
|
|
196
204
|
}
|
|
@@ -223,6 +231,8 @@
|
|
|
223
231
|
margin: 0 12rpx;
|
|
224
232
|
padding: 15rpx 0;
|
|
225
233
|
transition: all 0.3s;
|
|
234
|
+
position: relative;
|
|
235
|
+
z-index: 1;
|
|
226
236
|
color: var(--color-gray);
|
|
227
237
|
&.active {
|
|
228
238
|
font-weight: bold;
|
|
@@ -247,11 +257,11 @@
|
|
|
247
257
|
.ky-tab-slider {
|
|
248
258
|
position: absolute;
|
|
249
259
|
background-color: var(--color-primary);
|
|
250
|
-
height:
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
bottom: 0;
|
|
260
|
+
height: 0;
|
|
261
|
+
width: 0;
|
|
262
|
+
bottom: 1px;
|
|
254
263
|
transition: all 0.3s;
|
|
264
|
+
z-index: -1;
|
|
255
265
|
}
|
|
256
266
|
}
|
|
257
267
|
}
|