御魂选择器修改

package-lock.json

@@ -8,6 +8,7 @@
       "name": "vue-project",
       "version": "0.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
         "element-plus": "^2.4.3",
         "vue": "^3.3.10",
         "vuedraggable": "^4.1.0"
@@ -52,7 +53,7 @@
     },
     "node_modules/@element-plus/icons-vue": {
       "version": "2.3.1",
-      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
       "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "peerDependencies": {
         "vue": "^3.2.0"

package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.4.3",
     "vue": "^3.3.10",
     "vuedraggable": "^4.1.0"

src/components/ShikigamiProperty.vue

@@ -1,4 +1,12 @@
 <template>
+
+  <YuhunSelect
+      :showYuhunSelect="showYuhunSelect"
+      :currentShikigami="currentShikigami"
+      @closeYuhunSelect="closeYuhunSelect"
+      @updateShikigami="updateShikigami"
+  />
+
   <el-dialog
       v-model="show"
       :visable.sync="show"
@@ -38,14 +46,11 @@
             <!--            <el-input v-model="shikigami.speed"/>-->
           </el-form-item>
           <el-form-item label="御魂套装">
-            <el-select>
+            <el-button type="primary" @click="editShikigami()">
-              <el-option label="*" value="*"/>
+              <el-icon :size="20"><CirclePlus /></el-icon>
-              <el-option label="1" value="1"/>
+            </el-button>
-              <el-option label="2" value="2"/>
+
-              <el-option label="3" value="3"/>
+
-              <el-option label="4" value="4"/>
-              <el-option label="5" value="5"/>
-            </el-select>
           </el-form-item>
           <el-form-item label="效果指标">
             <el-select placeholder="伤害输出" v-model="shikigami.yuhun.target">
@@ -63,31 +68,35 @@
               <el-option label="防御输出" value="12"/>
             </el-select>
           </el-form-item>
-          <el-form-item  label="2号位主属性">
+          <el-form-item label="2号位主属性">
-            <el-select multiple collapse-tags collapse-tags-tooltip placeholder="伤害输出" v-model="shikigami.yuhun.property2">
+            <el-select multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="2" placeholder="伤害输出"
+                       v-model="shikigami.yuhun.property2">
               <el-option label="攻击加成" value="5"/>
               <el-option label="防御加成" value="6"/>
               <el-option label="生命加成" value="4"/>
               <el-option label="速度" value="7"/>
             </el-select>
           </el-form-item>
-          <el-form-item  label="4号位主属性">
+          <el-form-item label="4号位主属性">
-            <el-select multiple collapse-tags collapse-tags-tooltip placeholder="伤害输出" v-model="shikigami.yuhun.property4">
+            <el-select multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="2" placeholder="伤害输出"
+                       v-model="shikigami.yuhun.property4">
               <el-option label="攻击加成" value="5"/>
               <el-option label="防御加成" value="6"/>
               <el-option label="生命加成" value="4"/>
               <el-option label="效果命中" value="7"/>
               <el-option label="效果抵抗" value="8"/>
             </el-select>
-          </el-form-item><el-form-item  label="6号位主属性">
+          </el-form-item>
-          <el-select multiple collapse-tags collapse-tags-tooltip placeholder="伤害输出" v-model="shikigami.yuhun.property6">
+          <el-form-item label="6号位主属性">
-            <el-option label="攻击加成" value="5"/>
+            <el-select multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="2" placeholder="伤害输出"
-            <el-option label="防御加成" value="6"/>
+                       v-model="shikigami.yuhun.property6">
-            <el-option label="生命加成" value="4"/>
+              <el-option label="攻击加成" value="5"/>
-            <el-option label="暴击" value="7"/>
+              <el-option label="防御加成" value="6"/>
-            <el-option label="暴击伤害" value="8"/>
+              <el-option label="生命加成" value="4"/>
-          </el-select>
+              <el-option label="暴击" value="7"/>
-        </el-form-item>
+              <el-option label="暴击伤害" value="8"/>
+            </el-select>
+          </el-form-item>
         </div>
         <div style="display: flex; flex-direction: column; width: 50%;">
           <el-form-item label="高级定制">
@@ -112,8 +121,12 @@
 <script>
 import propertyData from "../data/property.json";
 import {ref} from "vue";
+import ShikigamiSelect from "@/components/ShikigamiSelect.vue";
+import YuhunSelect from "@/components/YuhunSelect.vue";
+// import YuhunSelect from "./YuhunSelect.vue";
 
 export default {
+  components: {YuhunSelect, ShikigamiSelect},
   props: {
     currentShikigami: {
       type: Object,
@@ -126,6 +139,7 @@ export default {
 
   data() {
     return {
+      showYuhunSelect:false,
       propertyData: propertyData,
       shikigami: {
         edit: false,
@@ -146,7 +160,7 @@ export default {
   },
   watch: {
     showProperty(newVal, oldVal) {
-      console.log("=======>>>> ", newVal, oldVal);
+      console.log("==aaaaaaa=====>>>> ", newVal, oldVal);
       this.show = newVal;
     },
     currentShikigami(newVal, oldVal) {
@@ -162,6 +176,18 @@ export default {
     },
   },
   methods: {
+    editShikigami() {
+      console.log("==== 选择御魂 ===");
+      // this.currentShikigami = item;
+      this.showYuhunSelect = true;
+      // this.index = index;
+    },
+    closeYuhunSelect() {
+      console.log("==== 选择御魂 ===");
+      // this.currentShikigami = item;
+      this.showYuhunSelect = false;
+      // this.index = index;
+    },
     cancel() {
       console.log("cancel====");
       this.$emit("closeProperty");

src/components/ShikigamiSelect.vue

@@ -41,7 +41,7 @@ import { ref } from "vue";
 import type { TabsPaneContext } from 'element-plus'
 
 
-const activeName = ref('SP')
+const activeName = ref('ALL')
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
@@ -65,6 +65,10 @@ export default {
       current: {},
       show: false,
       rarityLevels: [
+        {
+          "label":"全部",
+          "name":"ALL"
+        },
         {
           "label":"SP",
           "name":"SP"
@@ -121,6 +125,8 @@ export default {
       // this.current = {};
     },
     filterShikigamiByRarity(rarity) {
+      if(rarity.toLowerCase() == "all")
+        return this.shikigamiData
       // 将传入的rarity参数转换为小写
       const lowerCaseRarity = rarity.toLowerCase();
       return this.shikigamiData.filter(shikigami =>

src/components/YuhunSelect.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-dialog v-model="show" :visable.sync="show" title="请选择式神" @cancel="cancel" :before-close="cancel">
+    <span>当前选择：{{current.name}}</span>
+    <el-tabs
+        v-model="activeName"
+        type="card"
+        class="demo-tabs"
+        @tab-click="handleClick"
+    >
+      <el-tab-pane
+          v-for="(rarity, index) in rarityLevels"
+          :key="index"
+          :label="rarity.label"
+          :name="rarity.name"
+      >
+        <div v-if="rarityLevels.includes(rarity)"> <!-- 只在这些级别中显示内容 -->
+          <el-space wrap size="large">
+            <div v-for="i in filterShikigamiByRarity(rarity.name)" :key="i.name">
+              <el-button style="width: 100px; height: 100px;" @click.stop="confirm(i)">
+                <img :src="i.avatar" style="width: 99px; height: 99px;">
+              </el-button>
+            </div>
+          </el-space>
+        </div>
+
+      </el-tab-pane>
+    </el-tabs>
+
+    <!--    <template #footer>-->
+    <!--      <span class="dialog-footer">-->
+    <!--        <el-button @click.stop="cancel">Cancel</el-button>-->
+    <!--        <el-button type="primary" @click.stop="confirm"> Confirm </el-button>-->
+    <!--      </span>-->
+    <!--    </template>-->
+  </el-dialog>
+</template>
+
+<script  lang="ts">
+import shikigamiData from "../data/Shikigami.json";
+import { ref } from "vue";
+import type { TabsPaneContext } from 'element-plus'
+
+
+const activeName = ref('ALL')
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+export default {
+  props: {
+    currentShikigami: {
+      type: Object,
+      default: {},
+    },
+    showYuhunSelect: {
+      type: Boolean,
+    },
+  },
+
+  data() {
+    return {
+      activeName:activeName,
+      shikigamiData: shikigamiData,
+      selected: null,
+      current: {},
+      show: false,
+      rarityLevels: [
+        {
+          "label":"全部",
+          "name":"ALL"
+        },
+        {
+          "label":"攻击加成",
+          "name":"SP"
+        },
+        {
+          "label":"暴击",
+          "name":"SSR"
+        },
+        {
+          "label":"生命加成",
+          "name":"SR"
+        },
+        {
+          "label":"防御加成",
+          "name":"R"
+        },
+        {
+          "label":"效果命中",
+          "name":"N"
+        },
+        {
+          "label":"效果抵抗",
+          "name":"L"
+        },
+        {
+          "label":"呱太",
+          "name":"G"
+        },
+      ],
+    };
+  },
+  watch: {
+    showYuhunSelect(newVal, oldVal) {
+      console.log("=======aaaaaaa>>>> ", newVal, oldVal);
+      this.show = newVal;
+    },
+    currentShikigami(newVal, oldVal) {
+      console.log("===item====>>>> ", newVal, oldVal);
+      this.current = newVal;
+    },
+
+  },
+  methods: {
+    select(item) {
+      this.current = item;
+    },
+    cancel() {
+      console.log("cancel====");
+      this.$emit("closeYuhunSelect");
+    },
+    confirm(i) {
+      console.log("confirm====");
+      this.$emit("updateShikigami", JSON.parse(JSON.stringify(i)))
+      // this.current = {};
+    },
+    filterShikigamiByRarity(rarity) {
+      if(rarity.toLowerCase() == "all")
+        return this.shikigamiData
+      // 将传入的rarity参数转换为小写
+      const lowerCaseRarity = rarity.toLowerCase();
+      return this.shikigamiData.filter(shikigami =>
+          // 将shikigami对象的rarity属性也转换为小写进行比较
+          shikigami.rarity.toLowerCase() === lowerCaseRarity
+      );
+    },
+  },
+};
+</script>

src/components/Yys.vue

@@ -50,6 +50,7 @@ import shikigamiData from "../data/Shikigami.json";
 
 import {ref, reactive, toRefs} from "vue";
 import draggable from 'vuedraggable';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 import ShikigamiSelect from "./ShikigamiSelect.vue";
 import ShikigamiProperty from "./ShikigamiProperty.vue";
@@ -57,6 +58,7 @@ import ShikigamiProperty from "./ShikigamiProperty.vue";
 const showSelectShikigami = ref(false)
 const activeName = ref('first')
 
+
 export default {
   data() {
     return {

src/main.js

@@ -3,8 +3,17 @@ import App from './App.vue'
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const app = createApp(App)
 
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
+
 app.use(ElementPlus)
 app.mount('#app')
+
+
+
+