修改tab图

.gitignore

+node_modules
+package-lock.json

src/components/tabbar/index.vue

 <template>
-    <div class="my-tabbar">
-        <van-tabbar v-model="activeIndex" active-color="#EE0A24" route>
-            <van-tabbar-item icon="home-o" to="/commit">观影互动</van-tabbar-item>
-            <van-tabbar-item icon="search" to="/learn">学习项目</van-tabbar-item>
-            <van-tabbar-item icon="friends-o" to="/admin"
-                >管理员信息</van-tabbar-item
-            >
-            <van-tabbar-item icon="setting-o" to="/editPsd"
-                >修改密码</van-tabbar-item
-            >
-        </van-tabbar>
-    </div>
+  <div class="my-tabbar">
+    <van-tabbar v-model="activeIndex" active-color="#EE0A24" route>
+      <van-tabbar-item v-for="item in iconList" :to="item.url" :key="item.title">
+        <span>{{item.title}}</span>
+        <template #icon="props">
+          <img :src="props.active ? item.icon.active : item.icon.inactive" />
+        </template>
+      </van-tabbar-item>
+      <!-- <van-tabbar-item icon="search" to="/learn">
+        <span>学习项目</span>
+        <template #icon="props">
+          <img :src="props.active ? icon.active : icon.inactive" />
+        </template>
+      </van-tabbar-item>
+      <van-tabbar-item icon="friends-o" to="/admin">
+        <span>管理员信息</span>
+        <template #icon="props">
+          <img :src="props.active ? icon.active : icon.inactive" />
+        </template>
+      </van-tabbar-item>
+      <van-tabbar-item icon="setting-o" to="/editPsd">
+        <span>修改密码</span>
+        <template #icon="props">
+          <img :src="props.active ? icon.active : icon.inactive" />
+        </template>
+      </van-tabbar-item> -->
+    </van-tabbar>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        active: {
-            type: String,
-            default: "0",
+  props: {
+    active: {
+      type: String,
+      default: "0"
+    }
+  },
+  data() {
+    return {
+      activeIndex: this.active,
+      iconList: [
+        {
+          url: "/commit",
+          title: "观影互动",
+          icon: {
+            inactive: "images/applets/commit.png",
+            active: "images/applets/commit-active.png"
+          }
         },
-    },
-    data() {
-        return {
-            activeIndex: this.active,
-        };
-    },
+        {
+          url: "/learn",
+          title: "学习项目",
+          icon: {
+            inactive: "images/applets/learn.png",
+            active: "images/applets/learn-active.png"
+          }
+        },
+        {
+          url: "/admin",
+          title: "管理员信息",
+          icon: {
+            inactive: "images/applets/admin.png",
+            active: "images/applets/admin-active.png"
+          }
+        },
+        {
+          url: "/editPsd",
+          title: "修改密码",
+          icon: {
+            inactive: "images/applets/editpsd.png",
+            active: "images/applets/editpsd-active.png"
+          }
+        }
+      ]
+    };
+  }
 };
 </script>