103 lines
2.6 KiB
Vue
103 lines
2.6 KiB
Vue
<template>
|
|
<div class="hero-check">
|
|
<a-collapse :expand-icon-position="expandIconPosition">
|
|
<a-collapse-panel header="Hero">
|
|
<!-- <a-checkbox v-for="item in goldList" :key="item.value" @change="onChangeValue(item.value)">
|
|
<span>{{ item.label }}</span>
|
|
</a-checkbox> -->
|
|
<a-checkbox-group :value="heroValue" :options="goldList" @change="onChangeValue" />
|
|
<template #extra>{{ goldList.length }}</template>
|
|
</a-collapse-panel>
|
|
</a-collapse>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, defineEmits } from "vue";
|
|
import { SettingOutlined } from "@ant-design/icons-vue";
|
|
import { useMarketplaceStore } from "@/store/marketplace"
|
|
const marketplaceList = useMarketplaceStore()
|
|
|
|
const props = defineProps({
|
|
heroValue: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['clickHeroChild'])
|
|
|
|
const goldList = [
|
|
{ label: "Hill", value: "30100" },
|
|
{ label: "Aoi", value: "30300" },
|
|
{ label: "Yamada", value: "30200" },
|
|
{ label: "Astral", value: "30400" },
|
|
{ label: "Miffy", value: "30500" },
|
|
{ label: "Canoe", value: "30600" },
|
|
{ label: "Mariana", value: "30700" },
|
|
{ label: "Dragonscale", value: "30800" },
|
|
{ label: "Lazar", value: "30900" },
|
|
{ label: "Kurosawa", value: "31000" },
|
|
];
|
|
const checkArr = ref([])
|
|
const state = reactive({
|
|
value: [],
|
|
});
|
|
const expandIconPosition = ref("end");
|
|
const handleClick = (event) => {
|
|
// If you don't want click extra trigger collapse, you can prevent this:
|
|
event.stopPropagation();
|
|
};
|
|
const onChangeValue = (e) => {
|
|
// ToDo: 筛选
|
|
state.value = e
|
|
// marketplaceList.hero = e
|
|
console.log(e,state.value)
|
|
emit('clickHeroChild',state.value)
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hero-check {
|
|
border-bottom: 2px solid #3b3c59;
|
|
:deep(.ant-collapse) {
|
|
color: #fff;
|
|
border: 0px;
|
|
.ant-collapse-item {
|
|
border: 0px;
|
|
.ant-collapse-header {
|
|
color: #BB7FFF;
|
|
padding: 0;
|
|
}
|
|
.ant-collapse-content {
|
|
background: none;
|
|
border: none;
|
|
.ant-collapse-content-box {
|
|
padding: 20px 0;
|
|
.ant-checkbox-wrapper {
|
|
display: flex !important;
|
|
span {
|
|
color: #BB7FFF;
|
|
}
|
|
}
|
|
.ant-checkbox-group {
|
|
display: block;
|
|
.ant-checkbox-wrapper {
|
|
display: flex !important;
|
|
}
|
|
.ant-checkbox-group-item {
|
|
display: flex !important;
|
|
background: #16141b;
|
|
span {
|
|
color: #BB7FFF !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|