vue实现多箱子

Vue 实现多箱子功能

多箱子功能通常指在界面中展示多个独立的容器（箱子），每个箱子可以包含不同的内容或数据。以下是几种常见的实现方式：

动态组件实现

使用 Vue 的动态组件特性可以轻松切换不同的箱子内容：

<template>
  <div>
    <button @click="currentBox = 'BoxA'">显示箱子A</button>
    <button @click="currentBox = 'BoxB'">显示箱子B</button>
    <component :is="currentBox" />
  </div>
</template>

<script>
import BoxA from './BoxA.vue'
import BoxB from './BoxB.vue'

export default {
  components: { BoxA, BoxB },
  data() {
    return {
      currentBox: 'BoxA'
    }
  }
}
</script>

v-for 循环渲染多个箱子

当需要同时展示多个相同结构的箱子时，可以使用 v-for：

<template>
  <div>
    <div v-for="(box, index) in boxes" :key="index" class="box">
      <h3>{{ box.title }}</h3>
      <p>{{ box.content }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boxes: [
        { title: '箱子1', content: '内容1' },
        { title: '箱子2', content: '内容2' }
      ]
    }
  }
}
</script>

<style>
.box {
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px;
}
</style>

使用插槽实现灵活内容

通过插槽可以让箱子组件更灵活地接收不同内容：

<template>
  <div class="box-container">
    <Box v-for="(box, index) in boxList" :key="index" :title="box.title">
      <template #default>
        {{ box.content }}
      </template>
    </Box>
  </div>
</template>

<script>
import Box from './Box.vue'

export default {
  components: { Box },
  data() {
    return {
      boxList: [
        { title: '重要文件', content: '机密文档' },
        { title: '日常用品', content: '文具和工具' }
      ]
    }
  }
}
</script>

Box.vue 组件：

<template>
  <div class="box">
    <h3>{{ title }}</h3>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ['title']
}
</script>

使用状态管理（Vuex/Pinia）

当箱子之间需要共享或同步状态时，可以使用状态管理工具：

<template>
  <div>
    <div v-for="box in boxes" :key="box.id">
      <Box :content="box.content" @update="updateBox(box.id, $event)" />
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['boxes'])
  },
  methods: {
    ...mapMutations(['updateBox'])
  }
}
</script>

箱子拖拽排序实现

如果需要箱子可拖拽排序，可以使用第三方库如 vuedraggable：

<template>
  <draggable v-model="boxes" group="boxes" @end="onDragEnd">
    <div v-for="box in boxes" :key="box.id" class="box">
      {{ box.content }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      boxes: [
        { id: 1, content: '箱子A' },
        { id: 2, content: '箱子B' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      // 保存新的排序顺序
    }
  }
}
</script>

箱子动画效果

为箱子添加过渡动画：

<template>
  <transition-group name="box-list" tag="div">
    <div v-for="box in boxes" :key="box.id" class="box">
      {{ box.content }}
    </div>
  </transition-group>
</template>

<style>
.box-list-enter-active, .box-list-leave-active {
  transition: all 0.5s;
}
.box-list-enter, .box-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

以上方法可以根据具体需求组合使用，实现各种复杂的多箱子交互场景。