mirror of
https://github.com/Powerful-517/yys-editor.git
synced 2025-07-08 13:21:53 +00:00
feat: init
This commit is contained in:
zhangqi
BIN
src/components/.DS_Store
vendored
Normal file
BIN
src/components/.DS_Store
vendored
Normal file
Binary file not shown.
80
src/components/HeroProperty.vue
Normal file
80
src/components/HeroProperty.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="show"
|
||||
:visable.sync="show"
|
||||
title="配置属性"
|
||||
@cancel="cancel"
|
||||
>
|
||||
<span>当前选择侍神：{{current.name}}</span>
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="速度">
|
||||
<el-input v-model="form.speed" />
|
||||
</el-form-item>
|
||||
<el-form-item label="天赋">
|
||||
<el-select v-model="form.region" placeholder="please select your zone">
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Activity form">
|
||||
<el-input v-model="form.desc" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="confirm">Confirm</el-button>
|
||||
<el-button @click="cancel">Cancel</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import propertyData from "../data/property.json";
|
||||
import { ref } from "vue";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
currentHero: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
showProperty: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
propertyData: propertyData,
|
||||
form: {
|
||||
speed: ""
|
||||
},
|
||||
current: {},
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showProperty(newVal, oldVal) {
|
||||
console.log("=======>>>> ", newVal, oldVal);
|
||||
this.show = newVal;
|
||||
},
|
||||
currentHero(newVal, oldVal) {
|
||||
console.log("===item====>>>> ", newVal, oldVal);
|
||||
if (newVal.property != undefined) {
|
||||
this.form = newVal.property;
|
||||
}
|
||||
this.current = newVal;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
console.log("cancel====");
|
||||
this.$emit("closeProperty");
|
||||
},
|
||||
confirm() {
|
||||
console.log("confirm====");
|
||||
this.$emit("updateProperty", this.form);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
66
src/components/HeroSelect.vue
Normal file
66
src/components/HeroSelect.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<el-dialog v-model="show" :visable.sync="show" title="请选择侍神" @cancel="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/hero.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>
|
||||
99
src/components/Yys.vue
Normal file
99
src/components/Yys.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<HeroSelect
|
||||
:showSelectHero="showSelectHero"
|
||||
:currentHero="currentHero"
|
||||
@closeSelectHero="closeSelectHero"
|
||||
@updateHero="updateHero"
|
||||
/>
|
||||
|
||||
<HeroProperty
|
||||
:showProperty="showProperty"
|
||||
:currentHero="currentHero"
|
||||
@closeProperty="closeProperty"
|
||||
@updateProperty="updateProperty"
|
||||
/>
|
||||
<el-row>
|
||||
<el-col v-for="(item, index) in items" :key="index" :span="8">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img :src="item.avatar || '111'" class="image" @click="editHero(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>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="margin: 20px">
|
||||
<span>配置结果</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import heroData from "../data/hero.json";
|
||||
|
||||
import { ref, reactive, toRefs } from "vue";
|
||||
import HeroSelect from "./HeroSelect.vue";
|
||||
import HeroProperty from "./HeroProperty.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
heroData: heroData,
|
||||
showSelectHero: false,
|
||||
showProperty: false,
|
||||
items: [{}, {}, {}],
|
||||
index: 0,
|
||||
currentHero: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
HeroSelect,
|
||||
HeroProperty,
|
||||
},
|
||||
|
||||
methods: {
|
||||
closeSelectHero() {
|
||||
console.log("close select ====");
|
||||
this.showSelectHero = false;
|
||||
this.currentHero = {};
|
||||
},
|
||||
editHero(index, item) {
|
||||
console.log("==== edit hero ===", index, item);
|
||||
this.currentHero = item;
|
||||
this.showSelectHero = true;
|
||||
this.index = index;
|
||||
},
|
||||
updateHero(hero) {
|
||||
console.log("parent====> ", hero);
|
||||
this.showSelectHero = false;
|
||||
this.items[this.index].name = hero.name;
|
||||
this.currentHero = {};
|
||||
},
|
||||
editProperties(index, item) {
|
||||
console.log("add properties", index, item);
|
||||
this.showProperty = true;
|
||||
this.currentHero = item;
|
||||
},
|
||||
closeProperty() {
|
||||
console.log("close property ===");
|
||||
this.showProperty = false;
|
||||
this.currentHero = {};
|
||||
},
|
||||
updateProperty(property) {
|
||||
console.log("parent property====> ", property);
|
||||
this.showProperty = false;
|
||||
this.currentHero = {};
|
||||
this.items[this.index].properties = property;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user