Powerful-517/yys-editor
3
0
Fork 0
mirror of https://github.com/Powerful-517/yys-editor.git synced 2025-05-23 19:35:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
rookie4show 2024-02-20 16:22:57 +08:00
parent fdfcabc645
commit cfde5f3862
6 changed files with 94 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
package-lock.json generated
View File

@ -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",

3
package.json
View File

@ -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",

1
src/components/ShikigamiProperty.vue
View File

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

20
src/components/ShikigamiSelect.vue
View File

@ -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参数转换为小写

91
src/components/Yys.vue
View File

@ -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);

4
src/data/Shikigami.json
View File

@ -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"
},