式神选择器适配稀有度过滤

src/components/ShikigamiSelect.vue

@@ -7,24 +7,23 @@
         class="demo-tabs"
         @tab-click="handleClick"
     >
-      <el-tab-pane label="SP" name="first">
+      <el-tab-pane
-        <div>
+          v-for="(rarity, index) in rarityLevels"
-          <el-space wrap>
+          :key="index"
-            <div v-for="i in 20" :key="i">
+          :label="rarity"
-              <el-button text> Text button </el-button>
+          :name="rarity"
+      >
+        <div v-if="['SP', 'SSR', 'SR', 'R', 'N'].includes(rarity)"> <!-- 只在这些级别中显示内容 -->
+          <el-space wrap size="large">
+            <div v-for="i in filterShikigamiByRarity(rarity)" :key="i.name">
+              <el-button style="width: 100px; height: 100px;">
+                <img :src="i.avatar" style="width: 99px; height: 99px;">
+              </el-button>
             </div>
           </el-space>
-          <li v-for="(item, index) in shikigamiData" :key="index" @click.stop="select(item)">
-            <div>
-              <span>{{ item.name }}</span>
-            </div>
-          </li>
         </div>
+
       </el-tab-pane>
-      <el-tab-pane label="SSR" name="second">Config</el-tab-pane>
-      <el-tab-pane label="SR" name="third">Role</el-tab-pane>
-      <el-tab-pane label="R" name="fourth">Task</el-tab-pane>
-      <el-tab-pane label="N" name="fifth">Task</el-tab-pane>
     </el-tabs>
 
     <template #footer>
@@ -42,7 +41,7 @@ import { ref } from "vue";
 import type { TabsPaneContext } from 'element-plus'
 
 
-const activeName = ref('first')
+const activeName = ref('SP')
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
@@ -65,6 +64,7 @@ export default {
       selected: null,
       current: {},
       show: false,
+      rarityLevels: ["SP", "SSR", "SR", "R", "N"],
     };
   },
   watch: {
@@ -91,6 +91,14 @@ export default {
       this.$emit("updateShikigami", this.current);
       this.current = {};
     },
+    filterShikigamiByRarity(rarity) {
+      // 将传入的rarity参数转换为小写
+      const lowerCaseRarity = rarity.toLowerCase();
+      return this.shikigamiData.filter(shikigami =>
+          // 将shikigami对象的rarity属性也转换为小写进行比较
+          shikigami.rarity.toLowerCase() === lowerCaseRarity
+      );
+    },
   },
 };
 </script>

src/data/Shikigami.json

@@ -1,22 +1,27 @@
 [
     {
         "name": "妖刀姬",
+        "rarity": "SSR",
         "avatar":"/assets/Shikigami/ssr/Yoto Hime.png"
     },
     {
         "name": "大狗",
+        "rarity": "SSR",
         "avatar":"/assets/Shikigami/ssr/Ootengu.png"
     },
     {
         "name": "青灯",
+        "rarity": "SSR",
         "avatar":"/assets/Shikigami/ssr/Aoandon.png"
     },
     {
-        "name": "打火机",
+        "name": "座敷童子",
+        "rarity": "R",
         "avatar":"/assets/Shikigami/r/Zashiki.png"
     },
     {
-        "name": "和尚",
+        "name": "独眼小僧",
+        "rarity": "R",
         "avatar":"/assets/Shikigami/r/Hitotsume.png"
     }
 ]