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

1 year ago · cfde5f3862
parent fdfcabc645
commit cfde5f3862
6 changed files with 94 additions and 44 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/ShikigamiProperty.vue
+++ b/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">
--- a/src/components/ShikigamiSelect.vue
+++ b/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>
-      <span class="dialog-footer">
-        <el-button @click.stop="cancel">Cancel</el-button>
-        <el-button type="primary" @click.stop="confirm"> Confirm </el-button>
-      </span>
-    </template>
+<!--    <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>

@ -86,10 +86,10 @@ export default {
      console.log("cancel====");
      this.$emit("closeSelectShikigami");
    },
-    confirm() {
+    confirm(i) {
      console.log("confirm====");
-      this.$emit("updateShikigami", this.current);
-      this.current = {};
+      this.$emit("updateShikigami", i);
+      // this.current = {};
    },
    filterShikigamiByRarity(rarity) {
      // 将传入的rarity参数转换为小写
--- a/src/components/Yys.vue
+++ b/src/components/Yys.vue
@ -1,36 +1,44 @@
 <template>
  <ShikigamiSelect
-    :showSelectShikigami="showSelectShikigami"
-    :currentShikigami="currentShikigami"
-    @closeSelectShikigami="closeSelectShikigami"
-    @updateShikigami="updateShikigami"
+      :showSelectShikigami="showSelectShikigami"
+      :currentShikigami="currentShikigami"
+      @closeSelectShikigami="closeSelectShikigami"
+      @updateShikigami="updateShikigami"
  />

  <ShikigamiProperty
-    :showProperty="showProperty"
-    :currentShikigami="currentShikigami"
-    @closeProperty="closeProperty"
-    @updateProperty="updateProperty"
+      :showProperty="showProperty"
+      :currentShikigami="currentShikigami"
+      @closeProperty="closeProperty"
+      @updateProperty="updateProperty"
  />
-  <el-row>
-    <el-col v-for="(item, index) in shikigamiData" :key="index" :span="8">
-      <el-card :body-style="{ padding: '0px' }">
-        <img :src="item.avatar || '111'" class="image" @click="editShikigami(index, item)" />
-        <div style="padding: 14px">
-          <span>{{ item.name || "" }}</span>
-          <div v-if="item.properties">
-            <span>已配置属性：</span>
-            <div v-for="(value, key, index) in item.properties">
-                <span>{{key}}</span> : <span>{{value || '-'}}</span>
-            </div>
-          </div>
-          <div class="bottom">
-            <el-button @click="editProperties(index, item)">配置属性</el-button>
-          </div>
+
+<!--  <el-row :span="10">-->
+    <draggable :list="items" item-key="name" style="display: flex;flex-direction: row">
+      <template #item="{element, index}">
+        <div>
+          <el-col>
+            <el-card :body-style="{ padding: '0px' }">
+              <img :src="element.avatar || '11111'" class="image" @click="editShikigami(index, element)"/>
+              <div style="padding: 14px">
+                <span>{{ element.name || "" }}</span>
+                <div v-if="element.properties">
+                  <span>已配置属性：</span>
+                  <div v-for="(value, key, index) in element.properties">
+                    <span>{{ key }}</span> : <span>{{ value || '-' }}</span>
+                  </div>
+                </div>
+                <div class="bottom">
+                  <el-button @click="editProperties(index, element)">配置属性</el-button>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
        </div>
-      </el-card>
-    </el-col>
-  </el-row>
+
+      </template>
+    </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.currentShikigami = {};
+      this.items[this.index] = shikigami;
+      // this.items[this.index].name = shikigami.name;
+      // this.currentShikigami = {};
    },
    editProperties(index, item) {
      console.log("add properties", index, item);
--- a/src/data/Shikigami.json
+++ b/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"
    },