fimoi-tab-bar 1.1.1 → 1.1.3

package/fimoiButton/index.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <button>
+            按钮1
+        </button>
+    </div>
+
+
+</template>

package/fimoiTabBar/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="tabbar" :style="barStyle">
-    <button v-for="(item, index) in processedTabs" :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="item.labelStyle">{{ item.name }}</span>
-    </button>
+    </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",
       };
     },
@@ -84,18 +88,35 @@ export default {
       };
     },
     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,
-          labelStyle: {
-            color: isActive
-              ? this.styleConfig.activeColor || "#409eff"
-              : this.styleConfig.inactiveColor || "#7a7a7a",
-            fontWeight: isActive
-              ? this.styleConfig.activeWeight || 600
-              : this.styleConfig.inactiveWeight || 400,
-          },
+          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("; "),
         };
       });
     },
@@ -149,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/index.js

@@ -1,7 +1,8 @@
 import FimoiTabBar from "./fimoiTabBar/index.vue";
+import FimoiButton from "./fimoiButton/index.vue";
 
 // 批量组件注册
-const components = [FimoiTabBar];
+const components = [FimoiTabBar, FimoiButton];
 
 const install = function (Vue) {
   components.forEach((component) => {
@@ -15,7 +16,8 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export {
-  FimoiTabBar
+  FimoiTabBar,
+  FimoiButton
 };
 
 export default {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fimoi-tab-bar",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "一个基于 UniApp 的可配置底部标签栏组件，支持微信小程序。",
   "main": "index.js",
   "keywords": [
@@ -14,6 +14,7 @@
   "license": "MIT",
   "files": [
     "index.js",
-    "fimoiTabBar/index.vue"
+    "fimoiTabBar/index.vue",
+    "fimoiButton/index.vue"
   ]
 }