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 4 months ago
parent 60ebed0a5c
commit 5e8a76f6c5
2 changed files with 99 additions and 60 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. 25
      src/components/ShikigamiProperty.vue
  2. 134
      src/components/Yys.vue

25
src/components/ShikigamiProperty.vue
Unescape View File

@ -168,15 +168,11 @@ export default {
},
watch: {
showProperty(newVal, oldVal) {
console.log("==aaaaaaa=====>>>> ", newVal, oldVal);
// this.shikigami = this.currentShikigami;
console.log("currentShikigami", JSON.stringify(this.currentShikigami));
this.show = newVal;
},
currentShikigami(newVal, oldVal) {
console.log("confirm====" + JSON.stringify(newVal))
console.log("confirm====" + JSON.stringify(oldVal))
console.log("===item====>>>> ", newVal, oldVal);
if (newVal.properties != undefined && newVal.properties.edit == true) {
this.shikigami = newVal.properties;
}
@ -184,8 +180,6 @@ export default {
},
'shikigami.yuhun.target': {
handler(newVal, oldVal) {
console.log(newVal)
console.log(JSON.stringify(this.shikigami.yuhun))
switch (newVal) {
//<el-option label="伤害输出" value="1"/>
case "1": {
@ -283,48 +277,35 @@ export default {
},
methods: {
editShikigami() {
console.log("==== 选择御魂 ===");
// this.currentShikigami = item;
this.showYuhunSelect = true;
// this.index = index;
},
closeYuhunSelect() {
console.log("==== 关闭御魂选择 ===");
// this.currentShikigami = item;
this.showYuhunSelect = false;
// this.index = index;
},
updateYuhunSelect(yuhun) {
this.showYuhunSelect = false;
console.log("==== 完成御魂选择 ===");
console.log(yuhun);
console.log(this.shikigami.yuhun.yuhunSetEffect);
let length = this.shikigami.yuhun.yuhunSetEffect.length;
this.shikigami.yuhun.yuhunSetEffect.push(JSON.parse(JSON.stringify(yuhun)))
console.log(this.shikigami.yuhun.yuhunSetEffect);
console.log(this.shikigami.yuhun.yuhunSetEffect[0]);
},
cancel() {
console.log("cancel====");
this.$emit("closeProperty");
Object.assign(this.$data, this.$options.data())
},
confirm() {
console.log("confirm====");
console.log("confirm====" + JSON.stringify(this.shikigami.edit))
// if (null == this.shikigami[this.index].properties) {
this.shikigami.edit = true
this.$emit("updateProperty", JSON.parse(JSON.stringify(this.shikigami)));
Object.assign(this.$data, this.$options.data())
console.log("confirm====" + JSON.stringify(this.shikigami.edit))
// }
},
updateSkillRequired(index, value) {
console.log(index)
console.log(value)
this.shikigami.skillRequired[index] = value;
console.log(this.shikigami.skillRequired)
},
},
};

134
src/components/Yys.vue
Unescape View File

@ -12,34 +12,64 @@
@closeProperty="closeProperty"
@updateProperty="updateProperty"
/>
<draggable :list="groups" item-key="group" style="display: flex; flex-direction: column; width: 100%;"
handle=".drag-handle">
<!-- <el-row :span="10">-->
<draggable :list="items" item-key="name" style="display: flex;flex-direction: row">
<template #item="{element, index}">
<template #item="{ element: group, index: groupIndex }">
<el-row :span="24">
<div>
<el-col>
<el-card :body-style="{ padding: '0px' }">
<img :src="element.avatar || '/assets/Shikigami/default.png'" 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 style="display: flex; justify-content: flex-end;">
<el-button class="drag-handle" type="primary" icon="Rank" circle></el-button>
<el-button type="danger" icon="Delete" circle @click="removeGroup(groupIndex)"></el-button>
<el-button type="primary" icon="Plus" circle @click="addGroup"></el-button>
</div>
<div>
<draggable :list="group" item-key="name" style="display: flex; flex-direction: row; width: 20%;">
<template #item="{element : position, index:positionIndex}">
<div>
<el-col>
<el-card :body-style="{ padding: '0px' } ">
<img :src="position.avatar || '/assets/Shikigami/default.png'" class="image"
@click="editShikigami(groupIndex,positionIndex)"/>
<div style="padding: 14px; width: 95px">
<span>{{ position.name || "" }}</span>
<div class="bottom">
<el-button @click="editProperties(groupIndex,positionIndex)">配置属性</el-button>
</div>
<!-- properties-->
<!-- {"edit":true,"yuhun":{"yuhunSetEffect":[{"name":"狰","type":"attack","avatar":"/assets/Yuhun/狰.png"}],"target":"伤害输出","property2":["Attack"],"property4":["Attack"],"property6":["Crit","CritDamage"]},"levelRequired":"40","speed":"","skillRequiredMode":"all","skillRequired":["技能一","技能二","技能三"]}-->
<div v-if="position.properties">
<span>已配置属性：</span>
<div>
<span>{{ position.properties.yuhun.yuhunSetEffect.map(item => item.name).join(' ') }}</span>
</div>
<div v-for="(value, key, index) in position.properties">
<span>{{ key }}</span> : <span>{{ value || '-' }}</span>
</div>
</div>
</div>
</el-card>
</el-col>
<!-- Add delete button here -->
<el-button type="danger" icon="Delete" circle
@click="removeGroupElement(groupIndex, positionIndex)"></el-button>
<el-button type="primary" icon="Plus" circle @click="addGroupElement(groupIndex)"></el-button>
</div>
</div>
</el-card>
</el-col>
</template>
</draggable>
</div>
</div>
</el-row>
</template>
</draggable>
<!-- </el-row>-->
</template>
<!-- </el-row>-->
</draggable>
<div style="margin: 20px">
<span>配置结果</span>
</div>
@ -62,10 +92,12 @@ const activeName = ref('first')
export default {
data() {
return {
shikigamiData: shikigamiData,
showSelectShikigami: false,
showProperty: false,
items: [{}, {}, {}, {}, {}],
groups: [
[{}, {}, {}, {}, {}],
[{}, {}, {}, {}, {}]
],
// items: [
// {
// "name": "妖刀姬",
@ -83,7 +115,8 @@ export default {
// "avatar":"/assets/Shikigami/ssr/Yoto Hime.png"
// }
// ],
index: 0,
groupIndex: 0,
positionIndex: 0,
currentShikigami: {},
drag: false,
};
@ -101,36 +134,61 @@ export default {
this.showSelectShikigami = false;
this.currentShikigami = {};
},
editShikigami(index, item) {
console.log("==== 选择式神 ===", index, item);
this.currentShikigami = item;
editShikigami(groupIndex, positionIndex) {
console.log("==== 选择式神 ===", groupIndex, positionIndex);
this.showSelectShikigami = true;
this.index = index;
this.groupIndex = groupIndex;
this.positionIndex = positionIndex;
},
updateShikigami(shikigami) {
console.log("parent====> ", shikigami);
this.showSelectShikigami = false;
this.items[this.index] = shikigami;
const oldProperties = this.groups[this.groupIndex][this.positionIndex].properties;
this.groups[this.groupIndex][this.positionIndex] = shikigami;
this.groups[this.groupIndex][this.positionIndex].properties = oldProperties;
// this.items[this.index].name = shikigami.name;
// this.currentShikigami = {};
},
editProperties(index, item) {
console.log("add properties", index, item);
editProperties(groupIndex, positionIndex) {
this.showProperty = true;
this.currentShikigami = item;
this.index = index;
this.groupIndex = groupIndex;
this.positionIndex = positionIndex;
this.currentShikigami = this.groups[this.groupIndex][this.positionIndex];
console.log("currentShikigami", JSON.stringify(this.currentShikigami));
},
closeProperty() {
console.log("close property ===");
this.showProperty = false;
this.currentShikigami = {};
this.currentShikigami = this.groups[this.groupIndex][this.positionIndex];
},
updateProperty(property) {
console.log("parent property====> ", property);
this.showProperty = false;
this.currentShikigami = {};
this.items[this.index].properties = property;
this.groups[this.groupIndex][this.positionIndex].properties = property;
},
removeGroupElement(groupIndex, positionIndex) {
this.groups[groupIndex].splice(positionIndex, 1);
},
removeGroup(groupIndex) {
this.groups.splice(groupIndex, 1);
},
addGroup() {
this.groups.push([{}, {}, {}, {}, {}]);
},
addGroupElement(groupIndex) {
this.groups[groupIndex].push({});
},
},
};
</script>
<style scoped>
.drag-handle {
cursor: move;
}
.position-drag-handle {
cursor: move;
}
</style>

Write Preview
Loading…
Cancel
Save