PopupArray.vue
<template>
<div>
<div class="battery-status flex flex-wrap">
<div :class="item.flag ? 'current' : ''" v-for="item in batteryArray" :key="item.value"
@click.stop="clickBattery(item)">
<span>{{ item.label }}：{{ item.count }}</span>
<div v-if="item.flag">
<div>
<image :src="warehouseImage.DOUBLE_IMAGE"></image>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import warehouseImage from "@/static/images/warehouseImage.js";
export default {
props: {
batteryArray: {
type: Array,
default: () => []
}
},
data() {
return {
currentValue: '',
warehouseImage
};
},
computed: {
},
created() {
},
mounted() {
},
watch: {
},
methods: {
clickBattery(item) {
this.currentValue = item.value
this.$emit('clickBattery', item.value)
}
},
components: {
},
};
</script>
<style scoped>
.item {
position: relative;
width: 338rpx;
height: 76rpx;
line-height: 76rpx;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 4px;
background: #f2f2f2;
margin-right: 24rpx;
margin-bottom: 24rpx;
.item-double {
position: absolute;
bottom: 0;
right: 0;
width: 24rpx;
height: 24rpx;
border-radius: 4px 0px 3px 0px;
background: #475CE8;
.double-image {
width: 12rpx;
height: 12rpx;
image {
width: 13rpx;
height: 8rpx;
position: absolute;
top: 30%;
left: 20%;
}
}
}
}
.current {
background: #fff;
height: 74rpx;
border-radius: 8rpx;
color: #475CE8;
border: 2rpx solid #475CE8;
}
</style>
list.vue
<template>
<div>
<div>
<popup-array :batteryArray="statStatus" @clickBattery="clickBattery"></popup-array>
</div>
</div>
</template>
<script>
import PopupArray from "./PopupArray.vue";
export default {
data() {
return {
statStatus: [
// {
// value: "3",
// label: "闲置",
// count: 20,
// flag: false
// },
// {
// value: "2",
// label: "闲置",
// count: 20,
// flag: false
// },
// {
// value: "1",
// label: "闲置",
// count: 20,
// flag: false
// },
// {
// value: "4",
// label: "闲置",
// count: 20,
// flag: false
// },
// {
// value: "5",
// label: "闲置",
// count: 20,
// flag: false
// },
// {
// value: "6",
// label: "闲置",
// count: 20,
// flag: false
// },
// {
// value: "7",
// label: "闲置",
// count: 20,
// flag: false
// },
// {
// value: "8",
// label: "闲置",
// count: 20,
// flag: false
// },
// {
// value: "9",
// label: "闲置",
// count: 20,
// flag: false
// },
]
};
},
computed: {
},
created() {
},
mounted() {
},
methods: {
// 选择 敲重点
clickBattery(value) {
this.statStatus.forEach(item => {
if (item.value === value) {
item.flag = !item.flag
}
})
},
},
components: {
PopupArray,
},
}
</script>
<style scoped>
.button-bottom {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.container-status {
height: 800rpx;
overflow: auto;
padding-bottom: 176rpx;
.status-container {
padding: 40rpx 0 0 24rpx;
}
}
</style>
链接：https://blog.csdn.net/LRQQHM/article/details/135696275
