@kaiyinchem/ky-uniui 1.1.12 → 1.1.14

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"
@@ -21,14 +22,14 @@
       		:class="{ active: i === tabIndex, icon: tab.icon }"
       		:id="'ky_tab_'+i"
       		class="ky-tab-item"
-      		@click="onTabClick(tab, i)"
+      		@click="onTabClick(i)"
         >
           <text v-if="tab.icon" class="ky-tab-icon iconfont">{{ tab.icon }}</text>
           <text class="ky-tab-text">{{ tab[label] }}</text>
         </view>
       </view>
       <view
-      	v-if="tabItemWidth > 0 && !hasIcon"
+      	v-if="tabItemWidth > 0"
       	:style="{
 					left: tabItemOffsetLeft + 'px',
 					width: tabItemWidth + 'px',
@@ -47,6 +48,10 @@
 		emits: ['update:value', 'change'],
 		props: {
       // 显示字体图标传入icon: '\'
+			id: {
+				type: [String, Number],
+				default: 1
+			},
 			menu: {
 				type: Array,
 				default: () => [],
@@ -104,55 +109,48 @@
 				tabItemOffsetLeft: 0,
 				tabItemWidth: 0,
 				tabItemHeight: 2,
-				tabIndex: 0,
+				tabIndex: -1,
 			}
 		},
     watch: {
       value(v) {
-        this.tabIndex = v
+				this.onTabClick(v)
       }
     },
     computed: {
-      hasIcon() {
-        return this.menu.find(e => e.icon)
-      },
       $safeBottom() {
       	return uni.getSystemInfoSync().safeAreaInsets.bottom
       }
     },
 		mounted() {
-      if (!this.hasIcon) {
-        this.onTabClick(this.menu[this.index], this.index)
-      } else {
-        this.tabIndex = typeof this.value !== 'undefined' ? this.value : this.index
-      }
+			this.onTabClick(typeof this.value !== 'undefined' ? this.value : this.index)
 		},
 		methods: {
-			onTabClick(item, index) {
+			onTabClick(index) {
+				console.log('当前索引:', index)
 				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.type === 'card') {
-						this.tabItemHeight = data.height
-					}
-					if (this.tabIndex === index) {
-						return
-					}
-					this.tabIndex = index
-					this.$emit('change', index)
-				  this.$emit('update:value', index)
-				}).exec()
+				if (this.tabIndex === index) {
+					return
+				}
+				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
+						}
+					})
+				})
+				this.tabIndex = index
+				this.$emit('change', index)
+				this.$emit('update:value', index)
 			}
 		}
 	}

package/package.json

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