vue2实现一个抽屉menu

在Vue2中实现一个抽屉菜单通常会涉及到组件化的设计和状态管理。这里是一个简单的步骤和示例代码：

1. **创建组件**:
首先，创建两个组件：`Drawer.vue`（抽屉组件）和`Menu.vue`（菜单组件）。`Drawer`组件将包含可关闭和打开的按钮，以及内容区域；而`Menu`则是展示项目的列表。

<!-- Drawer.vue -->
<template>
  <div class="drawer">
    <button @click="toggleDrawer">展开</button>
    <transition name="fade">
      <slot v-if="open" />
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      open: false,
    };
  },
  methods: {
    toggleDrawer() {
      this.open = !this.open;
    },
  },
  // 添加必要的CSS过渡动画
  directives: {
    fade: {
      enter: function (el, binding) {
        el.style.opacity = 0;
      },
      update: function (el, binding) {
        el.style.transitionDuration = '0.3s';
        el.style.opacity = 1;
      },
      leave: function (el, binding) {
        el.style.opacity = 0;
        setTimeout(() => {
          el.style.display = 'none';
        }, 300);
      },
    },
  },
};
</script>

<!-- Menu.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  props: ['items'],
};
</script>

2. **在App.vue或需要的地方使用**:
将这两个组件嵌套使用，并通过 prop 向 `Drawer` 传递是否显示菜单的数据。

<!-- App.vue 或某个视图 -->
<template>
  <div id="app">
    <button @click="showMenu = !showMenu">Toggle Menu</button>
    <Drawer v-model="showMenu">
      <Menu items="..."/>
    </Drawer>
  </div>
</template>

<script>
import Drawer from './components/Drawer.vue';
import Menu from './components/Menu.vue';

export default {
  components: { Drawer, Menu },
  data() {
    return {
      showMenu: false,
    };
  },
  // ...其他数据和方法
};
</script>