完成式神选择功能，并支持拖拽

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "element-plus": "^2.4.3",
-        "vue": "^3.3.10"
+        "vue": "^3.3.10",
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.3.3",
@@ -2544,6 +2545,11 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -2778,6 +2784,17 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",

package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "element-plus": "^2.4.3",
-    "vue": "^3.3.10"
+    "vue": "^3.3.10",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

src/components/ShikigamiProperty.vue

@@ -4,6 +4,7 @@
     :visable.sync="show"
     title="配置属性"
     @cancel="cancel"
+    :before-close="cancel"
   >
     <span>当前选择侍神：{{current.name}}</span>
     <el-form :model="form" label-width="120px">

src/components/ShikigamiSelect.vue

@@ -16,7 +16,7 @@
         <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;">
+              <el-button style="width: 100px; height: 100px;" @click.stop="confirm(i)">
                 <img :src="i.avatar" style="width: 99px; height: 99px;">
               </el-button>
             </div>
@@ -26,12 +26,12 @@
       </el-tab-pane>
     </el-tabs>
 
-    <template #footer>
+<!--    <template #footer>-->
-      <span class="dialog-footer">
+<!--      <span class="dialog-footer">-->
-        <el-button @click.stop="cancel">Cancel</el-button>
+<!--        <el-button @click.stop="cancel">Cancel</el-button>-->
-        <el-button type="primary" @click.stop="confirm"> Confirm </el-button>
+<!--        <el-button type="primary" @click.stop="confirm"> Confirm </el-button>-->
-      </span>
+<!--      </span>-->
-    </template>
+<!--    </template>-->
   </el-dialog>
 </template>
 
@@ -86,10 +86,10 @@ export default {
       console.log("cancel====");
       this.$emit("closeSelectShikigami");
     },
-    confirm() {
+    confirm(i) {
       console.log("confirm====");
-      this.$emit("updateShikigami", this.current);
+      this.$emit("updateShikigami", i);
-      this.current = {};
+      // this.current = {};
     },
     filterShikigamiByRarity(rarity) {
       // 将传入的rarity参数转换为小写

src/components/Yys.vue

@@ -1,36 +1,44 @@
 <template>
   <ShikigamiSelect
-    :showSelectShikigami="showSelectShikigami"
+      :showSelectShikigami="showSelectShikigami"
-    :currentShikigami="currentShikigami"
+      :currentShikigami="currentShikigami"
-    @closeSelectShikigami="closeSelectShikigami"
+      @closeSelectShikigami="closeSelectShikigami"
-    @updateShikigami="updateShikigami"
+      @updateShikigami="updateShikigami"
   />
 
   <ShikigamiProperty
-    :showProperty="showProperty"
+      :showProperty="showProperty"
-    :currentShikigami="currentShikigami"
+      :currentShikigami="currentShikigami"
-    @closeProperty="closeProperty"
+      @closeProperty="closeProperty"
-    @updateProperty="updateProperty"
+      @updateProperty="updateProperty"
   />
-  <el-row>
+
-    <el-col v-for="(item, index) in shikigamiData" :key="index" :span="8">
+<!--  <el-row :span="10">-->
-      <el-card :body-style="{ padding: '0px' }">
+    <draggable :list="items" item-key="name" style="display: flex;flex-direction: row">
-        <img :src="item.avatar || '111'" class="image" @click="editShikigami(index, item)" />
+      <template #item="{element, index}">
-        <div style="padding: 14px">
+        <div>
-          <span>{{ item.name || "" }}</span>
+          <el-col>
-          <div v-if="item.properties">
+            <el-card :body-style="{ padding: '0px' }">
-            <span>已配置属性：</span>
+              <img :src="element.avatar || '11111'" class="image" @click="editShikigami(index, element)"/>
-            <div v-for="(value, key, index) in item.properties">
+              <div style="padding: 14px">
-                <span>{{key}}</span> : <span>{{value || '-'}}</span>
+                <span>{{ element.name || "" }}</span>
-            </div>
+                <div v-if="element.properties">
-          </div>
+                  <span>已配置属性：</span>
-          <div class="bottom">
+                  <div v-for="(value, key, index) in element.properties">
-            <el-button @click="editProperties(index, item)">配置属性</el-button>
+                    <span>{{ key }}</span> : <span>{{ value || '-' }}</span>
-          </div>
+                  </div>
+                </div>
+                <div class="bottom">
+                  <el-button @click="editProperties(index, element)">配置属性</el-button>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
         </div>
-      </el-card>
+
-    </el-col>
+      </template>
-  </el-row>
+    </draggable>
+<!--  </el-row>-->
 
   <div style="margin: 20px">
     <span>配置结果</span>
@@ -40,7 +48,9 @@
 <script>
 import shikigamiData from "../data/Shikigami.json";
 
-import { ref, reactive, toRefs } from "vue";
+import {ref, reactive, toRefs} from "vue";
+import draggable from 'vuedraggable';
+
 import ShikigamiSelect from "./ShikigamiSelect.vue";
 import ShikigamiProperty from "./ShikigamiProperty.vue";
 
@@ -53,14 +63,34 @@ export default {
       shikigamiData: shikigamiData,
       showSelectShikigami: false,
       showProperty: false,
-      items: [{}, {}, {}],
+      items: [{}, {}, {}, {}, {}],
+      // items: [
+      //   {
+      //     "name": "妖刀姬",
+      //     "rarity": "SSR",
+      //     "avatar":"/assets/Shikigami/ssr/Yoto Hime.png"
+      //   },
+      //   {
+      //     "name": "妖刀姬",
+      //     "rarity": "SSR",
+      //     "avatar":"/assets/Shikigami/ssr/Yoto Hime.png"
+      //   },
+      //   {
+      //     "name": "妖刀姬",
+      //     "rarity": "SSR",
+      //     "avatar":"/assets/Shikigami/ssr/Yoto Hime.png"
+      //   }
+      // ],
       index: 0,
       currentShikigami: {},
+      drag: false,
     };
   },
   components: {
+    draggable,
     ShikigamiSelect,
     ShikigamiProperty,
+
   },
 
   methods: {
@@ -78,8 +108,9 @@ export default {
     updateShikigami(shikigami) {
       console.log("parent====> ", shikigami);
       this.showSelectShikigami = false;
-      this.items[this.index].name = shikigami.name;
+      this.items[this.index] = shikigami;
-      this.currentShikigami = {};
+      // this.items[this.index].name = shikigami.name;
+      // this.currentShikigami = {};
     },
     editProperties(index, item) {
       console.log("add properties", index, item);

src/data/Shikigami.json

@@ -5,12 +5,12 @@
         "avatar":"/assets/Shikigami/ssr/Yoto Hime.png"
     },
     {
-        "name": "大狗",
+        "name": "大天狗",
         "rarity": "SSR",
         "avatar":"/assets/Shikigami/ssr/Ootengu.png"
     },
     {
-        "name": "青灯",
+        "name": "青行灯",
         "rarity": "SSR",
         "avatar":"/assets/Shikigami/ssr/Aoandon.png"
     },