48 lines
891 B
Vue
48 lines
891 B
Vue
<template>
|
|
<div class="list">
|
|
<div v-for="(item, index) in list" class="tools">
|
|
<ToolItem :item="item" @tool-selected="handleToolSelected" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ToolItem from './ToolItem.vue'
|
|
export default {
|
|
props: ['list'],
|
|
components: {
|
|
ToolItem
|
|
},
|
|
created() {
|
|
this.list.forEach(item => {
|
|
this.$set(item, 'active', false)
|
|
})
|
|
},
|
|
methods: {
|
|
handleToolSelected(selectedItem) {
|
|
// 重置所有项
|
|
this.list.forEach(item => {
|
|
if (item !== selectedItem) {
|
|
this.$set(item, 'active', false);
|
|
}
|
|
});
|
|
// 激活当前选中项
|
|
this.$set(selectedItem, 'active', true);
|
|
this.$emit('tool-selected', selectedItem.name);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr); // 4列布局
|
|
gap: 20px; // 网格间距
|
|
|
|
.tools {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
</style>
|