fimoi-tab-bar 1.1.0 → 1.1.2

package/fimoiTabBar/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="tabbar" :style="barStyle">
-    <button v-for="(item, index) in tabs" :key="item.key || item.link || index" class="tabbar-item"
-      :class="{ active: currentIndex === index }" :style="itemStyle" @click="handleSelect(index)">
+    <div v-for="(item, index) in processedTabs" :key="index" class="tabbar-item"
+      :class="{ active: currentIndex === index }" @click="handleSelect(index)">
       <template v-if="item.checked || item.unchecked">
         <img v-if="currentIndex === index && item.checked" class="icon-image" :src="item.checked" />
         <img v-else-if="item.unchecked" class="icon-image" :src="item.unchecked" />
       </template>
       <template v-else>
-        <span class="icon-text" :style="iconTextStyle">{{ item.icon }}</span>
+        <span class="icon-text" :style="item.iconStyle">{{ item.icon }}</span>
       </template>
-      <span class="label" :style="labelStyle(currentIndex === index)">{{ item.name }}</span>
-    </button>
+      <span class="label" :style="item.labelStyle">{{ item.name }}</span>
+    </div>
   </div>
 </template>
 <script>
@@ -39,6 +39,9 @@ export default {
     return {
       internalIndex: 0,
     };
+  },
+  mounted() {
+
   },
   computed: {
     currentIndex() {
@@ -54,24 +57,25 @@ export default {
       const config = this.styleConfig || {};
       const toRpx = (val) => (typeof val === "number" ? `${val}rpx` : val);
 
-      return {
+      const styles = {
         position: config.position || "fixed",
         left: 0,
         right: 0,
         bottom: 0,
         height: toRpx(config.height) || "128rpx",
-        background: config.background || "#ffffff",
-        borderTop: toRpx(config.borderTop) || "1rpx solid #eaeaea",
-        boxShadow: config.boxShadow || "0 -12rpx 32rpx rgba(0, 0, 0, 0.06)",
+        background: config.background || "transparent", // 匹配图片中的深色背景
         paddingBottom: "env(safe-area-inset-bottom)", // 增加刘海屏适配
       };
+
+      return Object.keys(styles)
+        .map((key) => `${key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}: ${styles[key]}`)
+        .join("; ");
     },
     itemStyle() {
       const config = this.styleConfig || {};
       const toRpx = (val) => (typeof val === "number" ? `${val}rpx` : val);
 
       return {
-        color: config.inactiveColor || "#7a7a7a",
         fontSize: toRpx(config.fontSize) || "24rpx",
       };
     },
@@ -83,6 +87,39 @@ export default {
         fontSize: toRpx(config.iconSize) || "40rpx",
       };
     },
+    processedTabs() {
+      const config = this.styleConfig || {};
+      const toRpx = (val) => (typeof val === "number" ? `${val}rpx` : val);
+
+      return this.tabs.map((item, index) => {
+        const isActive = this.currentIndex === index;
+        const activeColor = config.activeColor || "#9d2dff"; // 用户要求的选中颜色
+        const inactiveColor = config.inactiveColor || "#ffffff80"; // 用户要求的未选中颜色
+        const fontSize = toRpx(config.fontSize) || "24rpx";
+        const iconSize = toRpx(config.iconSize) || "40rpx";
+
+        const iconStyles = {
+          color: isActive ? activeColor : inactiveColor,
+          fontSize: iconSize,
+        };
+
+        const labelStyles = {
+          color: isActive ? activeColor : inactiveColor,
+          fontSize: fontSize,
+          fontWeight: isActive ? config.activeWeight || "normal" : config.inactiveWeight || "normal",
+        };
+
+        return {
+          ...item,
+          iconStyle: Object.keys(iconStyles)
+            .map((key) => `${key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}: ${iconStyles[key]}`)
+            .join("; "),
+          labelStyle: Object.keys(labelStyles)
+            .map((key) => `${key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}: ${labelStyles[key]}`)
+            .join("; "),
+        };
+      });
+    },
   },
   methods: {
     handleSelect(index) {
@@ -99,7 +136,7 @@ export default {
               console.error("switchTab failed:", err);
               // 如果 switchTab 失败，尝试 navigateTo
               uni.navigateTo({ url: item.link });
-            }
+            },
           });
         } else {
           uni.navigateTo({
@@ -108,18 +145,12 @@ export default {
               console.error("navigateTo failed:", err);
               // 如果 navigateTo 失败，尝试 switchTab
               uni.switchTab({ url: item.link });
-            }
+            },
           });
         }
       }
       this.$emit("change", item);
     },
-    labelStyle(isActive) {
-      return {
-        color: isActive ? this.styleConfig.activeColor || "#409eff" : this.styleConfig.inactiveColor || "#7a7a7a",
-        fontWeight: isActive ? this.styleConfig.activeWeight || 600 : this.styleConfig.inactiveWeight || 400,
-      };
-    },
   },
 };
 </script>
@@ -139,8 +170,14 @@ export default {
   justify-content: center;
   gap: 8rpx;
   border: none;
-  background: transparent;
+  background: transparent !important;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  /* 移除移动端点击高亮 */
+}
+
+.tabbar-item.active {
+  background: transparent !important;
 }
 
 .icon-text {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fimoi-tab-bar",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "一个基于 UniApp 的可配置底部标签栏组件，支持微信小程序。",
   "main": "index.js",
   "keywords": [