@kaiyinchem/ky-uniui 1.1.11 → 1.1.13

package/components/ky-tab.vue

@@ -10,9 +10,10 @@
 			card: type === 'card',
 			'white-bg': !noBg
     }"
+		:id="`ky-tab-wrap-${id}`"
     class="ky-tab-wrap"
   >
-		<view id="ky-tab-parent" class="ky-tab-components">
+		<view class="ky-tab-components">
       <view class="ky-tab-box">
       	<view
       		v-for="(tab, i) in menu"
@@ -29,7 +30,12 @@
       </view>
       <view
       	v-if="tabItemWidth > 0 && !hasIcon"
-      	:style="{ left: tabItemOffsetLeft + 'px', width:  tabItemWidth + 'px', 'background-color': activeColor }"
+      	:style="{
+					left: tabItemOffsetLeft + 'px',
+					width: tabItemWidth + 'px',
+					height: tabItemHeight + 'px',
+					'background-color': activeColor 
+				}"
       	class="ky-tab-slider"
       >
       </view>
@@ -42,6 +48,10 @@
 		emits: ['update:value', 'change'],
 		props: {
       // 显示字体图标传入icon: '\'
+			id: {
+				type: [String, Number],
+				default: 1
+			},
 			menu: {
 				type: Array,
 				default: () => [],
@@ -98,6 +108,7 @@
 			return {
 				tabItemOffsetLeft: 0,
 				tabItemWidth: 0,
+				tabItemHeight: 2,
 				tabIndex: 0,
 			}
 		},
@@ -123,27 +134,43 @@
 		},
 		methods: {
 			onTabClick(item, index) {
+				this.$nextTick(() => {
+					const query = uni.createSelectorQuery().in(this)
+					query.select(`#ky-tab-wrap-${this.id}`).boundingClientRect()
+					query.select(`#ky_tab_${index}`).boundingClientRect()
+					query.exec(data => {
+						const parent = data[0]
+						const tab = data[1]
+						this.tabItemWidth = tab.width
+						this.tabItemOffsetLeft = tab.left - parent.left
+						if (this.type === 'card') {
+							this.tabItemHeight = tab.height
+						}
+					})
+				})
 				if (this.disabled) {
 					return
 				}
-        if (this.hasIcon) {
-          this.tabIndex = index
-          this.$emit('change', index)
-          this.$emit('update:value', index)
-          return
-        }
-				const query = uni.createSelectorQuery().in(this)
-				const parent = query.select(`#ky_tab_${index}`)
-				parent.boundingClientRect(data => {
-					this.tabItemWidth = data.width
-					this.tabItemOffsetLeft = data.left
-					if (this.tabIndex === index) {
-						return
-					}
-					this.tabIndex = index
-					this.$emit('change', index)
-				  this.$emit('update:value', index)
-				}).exec()
+				if (this.tabIndex === index) {
+					return
+				}
+				this.tabIndex = index
+				this.$emit('change', index)
+				this.$emit('update:value', index)
+				// tabEl.boundingClientRect(data => {
+				// 	console.log(data)
+				// 	this.tabItemWidth = data.width
+				// 	this.tabItemOffsetLeft = data.left
+				// 	if (this.type === 'card') {
+				// 		this.tabItemHeight = data.height
+				// 	}
+				// 	if (this.tabIndex === index) {
+				// 		return
+				// 	}
+				// 	this.tabIndex = index
+				// 	this.$emit('change', index)
+				//   this.$emit('update:value', index)
+				// }).exec()
 			}
 		}
 	}
@@ -184,13 +211,12 @@
 						justify-content: center;
 						border-right: 1px solid var(--color-primary);
 						box-sizing: border-box;
-						&:last-child {
-							border-right: 0;
-						}
 						&.active {
-							background: var(--color-primary);
 							color: #ffffff;
 						}
+						&:last-child {
+							border-right: 0;
+						}
 					}
 				}
 			}
@@ -223,6 +249,8 @@
 					margin: 0 12rpx;
 					padding: 15rpx 0;
 					transition: all 0.3s;
+					position: relative;
+					z-index: 1;
 					color: var(--color-gray);
 					&.active {
 						font-weight: bold;
@@ -247,11 +275,11 @@
 			.ky-tab-slider {
 				position: absolute;
 				background-color: var(--color-primary);
-				height: 6rpx;
-				border-radius: 12rpx;
-				width: 50rpx;
-				bottom: 0;
+				height: 0;
+				width: 0;
+				bottom: 1px;
 		    transition: all 0.3s;
+				z-index: -1;
 			}
 		}
   }

package/package.json

@@ -9,7 +9,7 @@
 		"locale"
   ],
   "description": "an uniapp ui",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/yezipi/ky-uniui.git"