parent
f8b4ce3d92
commit
e005e2d7fd
@ -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> |
||||
Loading…
Reference in new issue