Powerful-517
/
yys-editor
mirror of https://github.com/Powerful-517/yys-editor
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
pull/4/head
rookie4show 1 year ago
parent fdfcabc645
commit cfde5f3862
6 changed files with 94 additions and 44 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 19
      package-lock.json
  2. 3
      package.json
  3. 1
      src/components/ShikigamiProperty.vue
  4. 20
      src/components/ShikigamiSelect.vue
  5. 91
      src/components/Yys.vue
  6. 4
      src/data/Shikigami.json

19
package-lock.json generated
Unescape View File

@ -9,7 +9,8 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"element-plus": "^2.4.3", "element-plus": "^2.4.3",
"vue": "^3.3.10" "vue": "^3.3.10",
"vuedraggable": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.3.3", "@rushstack/eslint-patch": "^1.3.3",
@ -2544,6 +2545,11 @@
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
"dev": true "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": { "node_modules/source-map-js": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz", "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
@ -2778,6 +2784,17 @@
"eslint": ">=6.0.0" "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": { "node_modules/which": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz", "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",

3
package.json
Unescape View File

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

1
src/components/ShikigamiProperty.vue
Unescape View File

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

20
src/components/ShikigamiSelect.vue
Unescape View File

@ -16,7 +16,7 @@
<div v-if="['SP', 'SSR', 'SR', 'R', 'N'].includes(rarity)"> <!-- 只在这些级别中显示内容 --> <div v-if="['SP', 'SSR', 'SR', 'R', 'N'].includes(rarity)"> <!-- 只在这些级别中显示内容 -->
<el-space wrap size="large"> <el-space wrap size="large">
<div v-for="i in filterShikigamiByRarity(rarity)" :key="i.name"> <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;"> <img :src="i.avatar" style="width: 99px; height: 99px;">
</el-button> </el-button>
</div> </div>
@ -26,12 +26,12 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </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> </el-dialog>
</template> </template>
@ -86,10 +86,10 @@ export default {
console.log("cancel===="); console.log("cancel====");
this.$emit("closeSelectShikigami"); this.$emit("closeSelectShikigami");
}, },
confirm() { confirm(i) {
console.log("confirm===="); console.log("confirm====");
this.$emit("updateShikigami", this.current); this.$emit("updateShikigami", i);
this.current = {}; // this.current = {};
}, },
filterShikigamiByRarity(rarity) { filterShikigamiByRarity(rarity) {
// 将传入的rarity参数转换为小写 // 将传入的rarity参数转换为小写

91
src/components/Yys.vue
Unescape View File

@ -1,36 +1,44 @@
<template> <template>
<ShikigamiSelect <ShikigamiSelect
:showSelectShikigami="showSelectShikigami" :showSelectShikigami="showSelectShikigami"
:currentShikigami="currentShikigami" :currentShikigami="currentShikigami"
@closeSelectShikigami="closeSelectShikigami" @closeSelectShikigami="closeSelectShikigami"
@updateShikigami="updateShikigami" @updateShikigami="updateShikigami"
/> />
<ShikigamiProperty <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> </div>
</el-card>
</el-col> </template>
</el-row> </draggable>
<!-- </el-row>-->
<div style="margin: 20px"> <div style="margin: 20px">
<span>配置结果</span> <span>配置结果</span>
@ -40,7 +48,9 @@
<script> <script>
import shikigamiData from "../data/Shikigami.json"; 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 ShikigamiSelect from "./ShikigamiSelect.vue";
import ShikigamiProperty from "./ShikigamiProperty.vue"; import ShikigamiProperty from "./ShikigamiProperty.vue";
@ -53,14 +63,34 @@ export default {
shikigamiData: shikigamiData, shikigamiData: shikigamiData,
showSelectShikigami: false, showSelectShikigami: false,
showProperty: 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, index: 0,
currentShikigami: {}, currentShikigami: {},
drag: false,
}; };
}, },
components: { components: {
draggable,
ShikigamiSelect, ShikigamiSelect,
ShikigamiProperty, ShikigamiProperty,
}, },
methods: { methods: {
@ -78,8 +108,9 @@ export default {
updateShikigami(shikigami) { updateShikigami(shikigami) {
console.log("parent====> ", shikigami); console.log("parent====> ", shikigami);
this.showSelectShikigami = false; 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) { editProperties(index, item) {
console.log("add properties", index, item); console.log("add properties", index, item);

4
src/data/Shikigami.json
Unescape View File

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

Write Preview
Loading…
Cancel
Save