调整命名，初始化式神选择器

src/components/ShikigamiProperty.vue

@@ -34,7 +34,7 @@ import { ref } from "vue";
 
 export default {
   props: {
-    currentHero: {
+    currentShikigami: {
       type: Object,
       default: {},
     },
@@ -58,7 +58,7 @@ export default {
       console.log("=======>>>> ", newVal, oldVal);
       this.show = newVal;
     },
-    currentHero(newVal, oldVal) {
+    currentShikigami(newVal, oldVal) {
         console.log("===item====>>>> ", newVal, oldVal);
         if (newVal.property != undefined) {
           this.form = newVal.property;

src/components/ShikigamiSelect.vue

@@ -0,0 +1,96 @@
+<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 label="SP" name="first">
+        <div>
+          <el-space wrap>
+            <div v-for="i in 20" :key="i">
+              <el-button text> Text button </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>
+      <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('first')
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+export default {
+  props: {
+    currentShikigami: {
+      type: Object,
+      default: {},
+    },
+    showSelectShikigami: {
+      type: Boolean,
+    },
+  },
+
+  data() {
+    return {
+      activeName:activeName,
+      shikigamiData: shikigamiData,
+      selected: null,
+      current: {},
+      show: false,
+    };
+  },
+  watch: {
+    showSelectShikigami(newVal, oldVal) {
+      console.log("=======>>>> ", 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("closeSelectShikigami");
+    },
+    confirm() {
+      console.log("confirm====");
+      this.$emit("updateShikigami", this.current);
+      this.current = {};
+    },
+  },
+};
+</script>

src/components/ShishenSelect.vue

@@ -1,66 +0,0 @@
-<template>
-  <el-dialog v-model="show" :visable.sync="show" title="请选择侍神" @cancel="cancel" :before-close="cancel">
-    <span>当前选择：{{current.name}}</span>
-    <li v-for="(item, index) in heroData" :key="index" @click.stop="select(item)">
-      <div>
-      <span>{{ item.name }}</span>
-      </div>
-    </li>
-    <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>
-import heroData from "../data/shishen.json";
-import { ref } from "vue";
-
-export default {
-  props: {
-    currentHero: {
-      type: Object,
-      default: {},
-    },
-    showSelectHero: {
-      type: Boolean,
-    },
-  },
-
-  data() {
-    return {
-      heroData: heroData,
-      selected: null,
-      current: {},
-      show: false,
-    };
-  },
-  watch: {
-    showSelectHero(newVal, oldVal) {
-      console.log("=======>>>> ", newVal, oldVal);
-      this.show = newVal;
-    },
-    currentHero(newVal, oldVal) {
-        console.log("===item====>>>> ", newVal, oldVal);
-      this.current = newVal;
-    },
-  },
-  methods: {
-    select(item) {
-        this.current = item;
-    },
-    cancel() {
-      console.log("cancel====");
-      this.$emit("closeSelectHero");
-    },
-    confirm() {
-      console.log("confirm====");
-      this.$emit("updateHero", this.current);
-      this.current = {};
-    },
-  },
-};
-</script>

src/components/Yys.vue

@@ -1,21 +1,21 @@
 <template>
-  <HeroSelect
+  <ShikigamiSelect
-    :showSelectHero="showSelectHero"
+    :showSelectShikigami="showSelectShikigami"
-    :currentHero="currentHero"
+    :currentShikigami="currentShikigami"
-    @closeSelectHero="closeSelectHero"
+    @closeSelectShikigami="closeSelectShikigami"
-    @updateHero="updateHero"
+    @updateShikigami="updateShikigami"
   />
 
-  <HeroProperty
+  <ShikigamiProperty
     :showProperty="showProperty"
-    :currentHero="currentHero"
+    :currentShikigami="currentShikigami"
     @closeProperty="closeProperty"
     @updateProperty="updateProperty"
   />
   <el-row>
-    <el-col v-for="(item, index) in heroData" :key="index" :span="8">
+    <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="editHero(index, item)" />
+        <img :src="item.avatar || '111'" class="image" @click="editShikigami(index, item)" />
         <div style="padding: 14px">
           <span>{{ item.name || "" }}</span>
           <div v-if="item.properties">
@@ -38,62 +38,63 @@
 </template>
 
 <script>
-import heroData from "../data/shishen.json";
+import shikigamiData from "../data/Shikigami.json";
 
 import { ref, reactive, toRefs } from "vue";
-import HeroSelect from "./ShishenSelect.vue";
+import ShikigamiSelect from "./ShikigamiSelect.vue";
-import HeroProperty from "./ShishenProperty.vue";
+import ShikigamiProperty from "./ShikigamiProperty.vue";
 
-const showSelectHero = ref(false)
+const showSelectShikigami = ref(false)
+const activeName = ref('first')
 
 export default {
   data() {
     return {
-      heroData: heroData,
+      shikigamiData: shikigamiData,
-      showSelectHero: false,
+      showSelectShikigami: false,
       showProperty: false,
       items: [{}, {}, {}],
       index: 0,
-      currentHero: {},
+      currentShikigami: {},
     };
   },
   components: {
-    HeroSelect,
+    ShikigamiSelect,
-    HeroProperty,
+    ShikigamiProperty,
   },
 
   methods: {
-    closeSelectHero() {
+    closeSelectShikigami() {
       console.log("close select ====");
-      this.showSelectHero = false;
+      this.showSelectShikigami = false;
-      this.currentHero = {};
+      this.currentShikigami = {};
     },
-    editHero(index, item) {
+    editShikigami(index, item) {
-      console.log("==== edit hero ===", index, item);
+      console.log("==== 选择式神 ===", index, item);
-      this.currentHero = item;
+      this.currentShikigami = item;
-      this.showSelectHero = true;
+      this.showSelectShikigami = true;
       this.index = index;
     },
-    updateHero(hero) {
+    updateShikigami(shikigami) {
-      console.log("parent====> ", hero);
+      console.log("parent====> ", shikigami);
-      this.showSelectHero = false;
+      this.showSelectShikigami = false;
-      this.items[this.index].name = hero.name;
+      this.items[this.index].name = shikigami.name;
-      this.currentHero = {};
+      this.currentShikigami = {};
     },
     editProperties(index, item) {
       console.log("add properties", index, item);
       this.showProperty = true;
-      this.currentHero = item;
+      this.currentShikigami = item;
     },
     closeProperty() {
       console.log("close property ===");
       this.showProperty = false;
-      this.currentHero = {};
+      this.currentShikigami = {};
     },
     updateProperty(property) {
       console.log("parent property====> ", property);
       this.showProperty = false;
-      this.currentHero = {};
+      this.currentShikigami = {};
       this.items[this.index].properties = property;
     },
   },

src/data/Shikigami.json

@@ -0,0 +1,22 @@
+[
+    {
+        "name": "妖刀姬",
+        "avatar":"/assets/Shikigami/ssr/Yoto Hime.png"
+    },
+    {
+        "name": "大狗",
+        "avatar":"/assets/Shikigami/ssr/Ootengu.png"
+    },
+    {
+        "name": "青灯",
+        "avatar":"/assets/Shikigami/ssr/Aoandon.png"
+    },
+    {
+        "name": "打火机",
+        "avatar":"/assets/Shikigami/r/Zashiki.png"
+    },
+    {
+        "name": "和尚",
+        "avatar":"/assets/Shikigami/r/Hitotsume.png"
+    }
+]