mirror of
https://github.com/Powerful-517/yys-editor.git
synced 2025-05-23 19:35:24 +00:00
御魂选择器修改
This commit is contained in:
parent
f8b4ce3d92
commit
e005e2d7fd
3
package-lock.json
generated
3
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "vue-project",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"element-plus": "^2.4.3",
|
||||
"vue": "^3.3.10",
|
||||
"vuedraggable": "^4.1.0"
|
||||
@ -52,7 +53,7 @@
|
||||
},
|
||||
"node_modules/@element-plus/icons-vue": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
|
||||
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
|
||||
"integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"element-plus": "^2.4.3",
|
||||
"vue": "^3.3.10",
|
||||
"vuedraggable": "^4.1.0"
|
||||
|
||||
@ -1,4 +1,12 @@
|
||||
<template>
|
||||
|
||||
<YuhunSelect
|
||||
:showYuhunSelect="showYuhunSelect"
|
||||
:currentShikigami="currentShikigami"
|
||||
@closeYuhunSelect="closeYuhunSelect"
|
||||
@updateShikigami="updateShikigami"
|
||||
/>
|
||||
|
||||
<el-dialog
|
||||
v-model="show"
|
||||
:visable.sync="show"
|
||||
@ -38,14 +46,11 @@
|
||||
<!-- <el-input v-model="shikigami.speed"/>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="御魂套装">
|
||||
<el-select>
|
||||
<el-option label="*" value="*"/>
|
||||
<el-option label="1" value="1"/>
|
||||
<el-option label="2" value="2"/>
|
||||
<el-option label="3" value="3"/>
|
||||
<el-option label="4" value="4"/>
|
||||
<el-option label="5" value="5"/>
|
||||
</el-select>
|
||||
<el-button type="primary" @click="editShikigami()">
|
||||
<el-icon :size="20"><CirclePlus /></el-icon>
|
||||
</el-button>
|
||||
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="效果指标">
|
||||
<el-select placeholder="伤害输出" v-model="shikigami.yuhun.target">
|
||||
@ -63,31 +68,35 @@
|
||||
<el-option label="防御输出" value="12"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="2号位主属性">
|
||||
<el-select multiple collapse-tags collapse-tags-tooltip placeholder="伤害输出" v-model="shikigami.yuhun.property2">
|
||||
<el-form-item label="2号位主属性">
|
||||
<el-select multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="2" placeholder="伤害输出"
|
||||
v-model="shikigami.yuhun.property2">
|
||||
<el-option label="攻击加成" value="5"/>
|
||||
<el-option label="防御加成" value="6"/>
|
||||
<el-option label="生命加成" value="4"/>
|
||||
<el-option label="速度" value="7"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="4号位主属性">
|
||||
<el-select multiple collapse-tags collapse-tags-tooltip placeholder="伤害输出" v-model="shikigami.yuhun.property4">
|
||||
<el-form-item label="4号位主属性">
|
||||
<el-select multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="2" placeholder="伤害输出"
|
||||
v-model="shikigami.yuhun.property4">
|
||||
<el-option label="攻击加成" value="5"/>
|
||||
<el-option label="防御加成" value="6"/>
|
||||
<el-option label="生命加成" value="4"/>
|
||||
<el-option label="效果命中" value="7"/>
|
||||
<el-option label="效果抵抗" value="8"/>
|
||||
</el-select>
|
||||
</el-form-item><el-form-item label="6号位主属性">
|
||||
<el-select multiple collapse-tags collapse-tags-tooltip placeholder="伤害输出" v-model="shikigami.yuhun.property6">
|
||||
<el-option label="攻击加成" value="5"/>
|
||||
<el-option label="防御加成" value="6"/>
|
||||
<el-option label="生命加成" value="4"/>
|
||||
<el-option label="暴击" value="7"/>
|
||||
<el-option label="暴击伤害" value="8"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
<el-form-item label="6号位主属性">
|
||||
<el-select multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="2" placeholder="伤害输出"
|
||||
v-model="shikigami.yuhun.property6">
|
||||
<el-option label="攻击加成" value="5"/>
|
||||
<el-option label="防御加成" value="6"/>
|
||||
<el-option label="生命加成" value="4"/>
|
||||
<el-option label="暴击" value="7"/>
|
||||
<el-option label="暴击伤害" value="8"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; width: 50%;">
|
||||
<el-form-item label="高级定制">
|
||||
@ -112,8 +121,12 @@
|
||||
<script>
|
||||
import propertyData from "../data/property.json";
|
||||
import {ref} from "vue";
|
||||
import ShikigamiSelect from "@/components/ShikigamiSelect.vue";
|
||||
import YuhunSelect from "@/components/YuhunSelect.vue";
|
||||
// import YuhunSelect from "./YuhunSelect.vue";
|
||||
|
||||
export default {
|
||||
components: {YuhunSelect, ShikigamiSelect},
|
||||
props: {
|
||||
currentShikigami: {
|
||||
type: Object,
|
||||
@ -126,6 +139,7 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
showYuhunSelect:false,
|
||||
propertyData: propertyData,
|
||||
shikigami: {
|
||||
edit: false,
|
||||
@ -146,7 +160,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
showProperty(newVal, oldVal) {
|
||||
console.log("=======>>>> ", newVal, oldVal);
|
||||
console.log("==aaaaaaa=====>>>> ", newVal, oldVal);
|
||||
this.show = newVal;
|
||||
},
|
||||
currentShikigami(newVal, oldVal) {
|
||||
@ -162,6 +176,18 @@ 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;
|
||||
},
|
||||
cancel() {
|
||||
console.log("cancel====");
|
||||
this.$emit("closeProperty");
|
||||
|
||||
@ -41,7 +41,7 @@ import { ref } from "vue";
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
|
||||
|
||||
const activeName = ref('SP')
|
||||
const activeName = ref('ALL')
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
@ -65,6 +65,10 @@ export default {
|
||||
current: {},
|
||||
show: false,
|
||||
rarityLevels: [
|
||||
{
|
||||
"label":"全部",
|
||||
"name":"ALL"
|
||||
},
|
||||
{
|
||||
"label":"SP",
|
||||
"name":"SP"
|
||||
@ -121,6 +125,8 @@ export default {
|
||||
// this.current = {};
|
||||
},
|
||||
filterShikigamiByRarity(rarity) {
|
||||
if(rarity.toLowerCase() == "all")
|
||||
return this.shikigamiData
|
||||
// 将传入的rarity参数转换为小写
|
||||
const lowerCaseRarity = rarity.toLowerCase();
|
||||
return this.shikigamiData.filter(shikigami =>
|
||||
|
||||
139
src/components/YuhunSelect.vue
Normal file
139
src/components/YuhunSelect.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<el-dialog v-model="show" :visable.sync="show" title="请选择式神" @cancel="cancel" :before-close="cancel">
|
||||
<span>当前选择：{{current.name}}</span>
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(rarity, index) in rarityLevels"
|
||||
:key="index"
|
||||
:label="rarity.label"
|
||||
:name="rarity.name"
|
||||
>
|
||||
<div v-if="rarityLevels.includes(rarity)"> <!-- 只在这些级别中显示内容 -->
|
||||
<el-space wrap size="large">
|
||||
<div v-for="i in filterShikigamiByRarity(rarity.name)" :key="i.name">
|
||||
<el-button style="width: 100px; height: 100px;" @click.stop="confirm(i)">
|
||||
<img :src="i.avatar" style="width: 99px; height: 99px;">
|
||||
</el-button>
|
||||
</div>
|
||||
</el-space>
|
||||
</div>
|
||||
|
||||
</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>-->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import shikigamiData from "../data/Shikigami.json";
|
||||
import { ref } from "vue";
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
|
||||
|
||||
const activeName = ref('ALL')
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
currentShikigami: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
showYuhunSelect: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeName:activeName,
|
||||
shikigamiData: shikigamiData,
|
||||
selected: null,
|
||||
current: {},
|
||||
show: false,
|
||||
rarityLevels: [
|
||||
{
|
||||
"label":"全部",
|
||||
"name":"ALL"
|
||||
},
|
||||
{
|
||||
"label":"攻击加成",
|
||||
"name":"SP"
|
||||
},
|
||||
{
|
||||
"label":"暴击",
|
||||
"name":"SSR"
|
||||
},
|
||||
{
|
||||
"label":"生命加成",
|
||||
"name":"SR"
|
||||
},
|
||||
{
|
||||
"label":"防御加成",
|
||||
"name":"R"
|
||||
},
|
||||
{
|
||||
"label":"效果命中",
|
||||
"name":"N"
|
||||
},
|
||||
{
|
||||
"label":"效果抵抗",
|
||||
"name":"L"
|
||||
},
|
||||
{
|
||||
"label":"呱太",
|
||||
"name":"G"
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showYuhunSelect(newVal, oldVal) {
|
||||
console.log("=======aaaaaaa>>>> ", newVal, oldVal);
|
||||
this.show = newVal;
|
||||
},
|
||||
currentShikigami(newVal, oldVal) {
|
||||
console.log("===item====>>>> ", newVal, oldVal);
|
||||
this.current = newVal;
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
select(item) {
|
||||
this.current = item;
|
||||
},
|
||||
cancel() {
|
||||
console.log("cancel====");
|
||||
this.$emit("closeYuhunSelect");
|
||||
},
|
||||
confirm(i) {
|
||||
console.log("confirm====");
|
||||
this.$emit("updateShikigami", JSON.parse(JSON.stringify(i)))
|
||||
// this.current = {};
|
||||
},
|
||||
filterShikigamiByRarity(rarity) {
|
||||
if(rarity.toLowerCase() == "all")
|
||||
return this.shikigamiData
|
||||
// 将传入的rarity参数转换为小写
|
||||
const lowerCaseRarity = rarity.toLowerCase();
|
||||
return this.shikigamiData.filter(shikigami =>
|
||||
// 将shikigami对象的rarity属性也转换为小写进行比较
|
||||
shikigami.rarity.toLowerCase() === lowerCaseRarity
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -50,6 +50,7 @@ import shikigamiData from "../data/Shikigami.json";
|
||||
|
||||
import {ref, reactive, toRefs} from "vue";
|
||||
import draggable from 'vuedraggable';
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
import ShikigamiSelect from "./ShikigamiSelect.vue";
|
||||
import ShikigamiProperty from "./ShikigamiProperty.vue";
|
||||
@ -57,6 +58,7 @@ import ShikigamiProperty from "./ShikigamiProperty.vue";
|
||||
const showSelectShikigami = ref(false)
|
||||
const activeName = ref('first')
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -3,8 +3,17 @@ import App from './App.vue'
|
||||
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.use(ElementPlus)
|
||||
app.mount('#app')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user