mirror of
https://github.com/Powerful-517/yys-editor.git
synced 2025-07-06 20:01:55 +00:00
队伍拖动按钮实现
队伍新增 式神属性编辑保留上一次编辑结果
This commit is contained in:
@ -168,15 +168,11 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
showProperty(newVal, oldVal) {
|
showProperty(newVal, oldVal) {
|
||||||
console.log("==aaaaaaa=====>>>> ", newVal, oldVal);
|
// this.shikigami = this.currentShikigami;
|
||||||
|
console.log("currentShikigami", JSON.stringify(this.currentShikigami));
|
||||||
this.show = newVal;
|
this.show = newVal;
|
||||||
},
|
},
|
||||||
currentShikigami(newVal, oldVal) {
|
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) {
|
if (newVal.properties != undefined && newVal.properties.edit == true) {
|
||||||
this.shikigami = newVal.properties;
|
this.shikigami = newVal.properties;
|
||||||
}
|
}
|
||||||
@ -184,8 +180,6 @@ export default {
|
|||||||
},
|
},
|
||||||
'shikigami.yuhun.target': {
|
'shikigami.yuhun.target': {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
console.log(newVal)
|
|
||||||
console.log(JSON.stringify(this.shikigami.yuhun))
|
|
||||||
switch (newVal) {
|
switch (newVal) {
|
||||||
//<el-option label="伤害输出" value="1"/>
|
//<el-option label="伤害输出" value="1"/>
|
||||||
case "1": {
|
case "1": {
|
||||||
@ -283,48 +277,35 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
editShikigami() {
|
editShikigami() {
|
||||||
console.log("==== 选择御魂 ===");
|
|
||||||
// this.currentShikigami = item;
|
// this.currentShikigami = item;
|
||||||
this.showYuhunSelect = true;
|
this.showYuhunSelect = true;
|
||||||
// this.index = index;
|
// this.index = index;
|
||||||
},
|
},
|
||||||
closeYuhunSelect() {
|
closeYuhunSelect() {
|
||||||
console.log("==== 关闭御魂选择 ===");
|
|
||||||
// this.currentShikigami = item;
|
// this.currentShikigami = item;
|
||||||
this.showYuhunSelect = false;
|
this.showYuhunSelect = false;
|
||||||
// this.index = index;
|
// this.index = index;
|
||||||
},
|
},
|
||||||
updateYuhunSelect(yuhun) {
|
updateYuhunSelect(yuhun) {
|
||||||
this.showYuhunSelect = false;
|
this.showYuhunSelect = false;
|
||||||
console.log("==== 完成御魂选择 ===");
|
|
||||||
console.log(yuhun);
|
|
||||||
console.log(this.shikigami.yuhun.yuhunSetEffect);
|
|
||||||
let length = this.shikigami.yuhun.yuhunSetEffect.length;
|
let length = this.shikigami.yuhun.yuhunSetEffect.length;
|
||||||
this.shikigami.yuhun.yuhunSetEffect.push(JSON.parse(JSON.stringify(yuhun)))
|
this.shikigami.yuhun.yuhunSetEffect.push(JSON.parse(JSON.stringify(yuhun)))
|
||||||
console.log(this.shikigami.yuhun.yuhunSetEffect);
|
|
||||||
console.log(this.shikigami.yuhun.yuhunSetEffect[0]);
|
|
||||||
|
|
||||||
},
|
},
|
||||||
cancel() {
|
cancel() {
|
||||||
console.log("cancel====");
|
|
||||||
this.$emit("closeProperty");
|
this.$emit("closeProperty");
|
||||||
|
Object.assign(this.$data, this.$options.data())
|
||||||
},
|
},
|
||||||
confirm() {
|
confirm() {
|
||||||
console.log("confirm====");
|
|
||||||
console.log("confirm====" + JSON.stringify(this.shikigami.edit))
|
|
||||||
// if (null == this.shikigami[this.index].properties) {
|
// if (null == this.shikigami[this.index].properties) {
|
||||||
this.shikigami.edit = true
|
this.shikigami.edit = true
|
||||||
this.$emit("updateProperty", JSON.parse(JSON.stringify(this.shikigami)));
|
this.$emit("updateProperty", JSON.parse(JSON.stringify(this.shikigami)));
|
||||||
Object.assign(this.$data, this.$options.data())
|
Object.assign(this.$data, this.$options.data())
|
||||||
console.log("confirm====" + JSON.stringify(this.shikigami.edit))
|
|
||||||
|
|
||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
updateSkillRequired(index, value) {
|
updateSkillRequired(index, value) {
|
||||||
console.log(index)
|
|
||||||
console.log(value)
|
|
||||||
this.shikigami.skillRequired[index] = value;
|
this.shikigami.skillRequired[index] = value;
|
||||||
console.log(this.shikigami.skillRequired)
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -12,34 +12,64 @@
|
|||||||
@closeProperty="closeProperty"
|
@closeProperty="closeProperty"
|
||||||
@updateProperty="updateProperty"
|
@updateProperty="updateProperty"
|
||||||
/>
|
/>
|
||||||
|
<draggable :list="groups" item-key="group" style="display: flex; flex-direction: column; width: 100%;"
|
||||||
|
handle=".drag-handle">
|
||||||
|
|
||||||
<!-- <el-row :span="10">-->
|
<template #item="{ element: group, index: groupIndex }">
|
||||||
<draggable :list="items" item-key="name" style="display: flex;flex-direction: row">
|
|
||||||
<template #item="{element, index}">
|
<el-row :span="24">
|
||||||
<div>
|
<div>
|
||||||
<el-col>
|
<div style="display: flex; justify-content: flex-end;">
|
||||||
<el-card :body-style="{ padding: '0px' }">
|
<el-button class="drag-handle" type="primary" icon="Rank" circle></el-button>
|
||||||
<img :src="element.avatar || '/assets/Shikigami/default.png'" class="image" @click="editShikigami(index, element)"/>
|
<el-button type="danger" icon="Delete" circle @click="removeGroup(groupIndex)"></el-button>
|
||||||
<div style="padding: 14px">
|
<el-button type="primary" icon="Plus" circle @click="addGroup"></el-button>
|
||||||
<span>{{ element.name || "" }}</span>
|
</div>
|
||||||
<div v-if="element.properties">
|
<div>
|
||||||
<span>已配置属性:</span>
|
<draggable :list="group" item-key="name" style="display: flex; flex-direction: row; width: 20%;">
|
||||||
<div v-for="(value, key, index) in element.properties">
|
<template #item="{element : position, index:positionIndex}">
|
||||||
<span>{{ key }}</span> : <span>{{ value || '-' }}</span>
|
<div>
|
||||||
</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>
|
||||||
<div class="bottom">
|
</template>
|
||||||
<el-button @click="editProperties(index, element)">配置属性</el-button>
|
</draggable>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</div>
|
</div>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
</template>
|
|
||||||
</draggable>
|
|
||||||
<!-- </el-row>-->
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- </el-row>-->
|
||||||
|
</draggable>
|
||||||
<div style="margin: 20px">
|
<div style="margin: 20px">
|
||||||
<span>配置结果</span>
|
<span>配置结果</span>
|
||||||
</div>
|
</div>
|
||||||
@ -62,10 +92,12 @@ const activeName = ref('first')
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
shikigamiData: shikigamiData,
|
|
||||||
showSelectShikigami: false,
|
showSelectShikigami: false,
|
||||||
showProperty: false,
|
showProperty: false,
|
||||||
items: [{}, {}, {}, {}, {}],
|
groups: [
|
||||||
|
[{}, {}, {}, {}, {}],
|
||||||
|
[{}, {}, {}, {}, {}]
|
||||||
|
],
|
||||||
// items: [
|
// items: [
|
||||||
// {
|
// {
|
||||||
// "name": "妖刀姬",
|
// "name": "妖刀姬",
|
||||||
@ -83,7 +115,8 @@ export default {
|
|||||||
// "avatar":"/assets/Shikigami/ssr/Yoto Hime.png"
|
// "avatar":"/assets/Shikigami/ssr/Yoto Hime.png"
|
||||||
// }
|
// }
|
||||||
// ],
|
// ],
|
||||||
index: 0,
|
groupIndex: 0,
|
||||||
|
positionIndex: 0,
|
||||||
currentShikigami: {},
|
currentShikigami: {},
|
||||||
drag: false,
|
drag: false,
|
||||||
};
|
};
|
||||||
@ -101,36 +134,61 @@ export default {
|
|||||||
this.showSelectShikigami = false;
|
this.showSelectShikigami = false;
|
||||||
this.currentShikigami = {};
|
this.currentShikigami = {};
|
||||||
},
|
},
|
||||||
editShikigami(index, item) {
|
editShikigami(groupIndex, positionIndex) {
|
||||||
console.log("==== 选择式神 ===", index, item);
|
console.log("==== 选择式神 ===", groupIndex, positionIndex);
|
||||||
this.currentShikigami = item;
|
|
||||||
this.showSelectShikigami = true;
|
this.showSelectShikigami = true;
|
||||||
this.index = index;
|
this.groupIndex = groupIndex;
|
||||||
|
this.positionIndex = positionIndex;
|
||||||
},
|
},
|
||||||
updateShikigami(shikigami) {
|
updateShikigami(shikigami) {
|
||||||
console.log("parent====> ", shikigami);
|
console.log("parent====> ", shikigami);
|
||||||
this.showSelectShikigami = false;
|
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.items[this.index].name = shikigami.name;
|
||||||
// this.currentShikigami = {};
|
// this.currentShikigami = {};
|
||||||
},
|
},
|
||||||
editProperties(index, item) {
|
editProperties(groupIndex, positionIndex) {
|
||||||
console.log("add properties", index, item);
|
|
||||||
this.showProperty = true;
|
this.showProperty = true;
|
||||||
this.currentShikigami = item;
|
this.groupIndex = groupIndex;
|
||||||
this.index = index;
|
this.positionIndex = positionIndex;
|
||||||
|
this.currentShikigami = this.groups[this.groupIndex][this.positionIndex];
|
||||||
|
console.log("currentShikigami", JSON.stringify(this.currentShikigami));
|
||||||
},
|
},
|
||||||
closeProperty() {
|
closeProperty() {
|
||||||
console.log("close property ===");
|
|
||||||
this.showProperty = false;
|
this.showProperty = false;
|
||||||
this.currentShikigami = {};
|
this.currentShikigami = this.groups[this.groupIndex][this.positionIndex];
|
||||||
},
|
},
|
||||||
updateProperty(property) {
|
updateProperty(property) {
|
||||||
console.log("parent property====> ", property);
|
|
||||||
this.showProperty = false;
|
this.showProperty = false;
|
||||||
this.currentShikigami = {};
|
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>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.drag-handle {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.position-drag-handle {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Reference in New Issue
Block a user