<template>
  <ex-drawer ref="drawer" width="488">
    <!-- 抽屉页面 -->
    <view class="mian-drawer" slot="drawerContent">
      <drawer-home @closeDrawer="closeDrawer"></drawer-home>
    </view>

    <!-- 主页面 -->
    <view class="mian-container" slot="containerContent">
      <chat-main-list @openDrawer="openDrawer"></chat-main-list>
    </view>
  </ex-drawer>
</template>

<script setup>
import { ref, onMounted } from "vue";
import exDrawer from "@/third/ex-drawer/ex-drawer.vue";
import DrawerHome from "@/pages/drawer/DrawerHome.vue";
import ChatMainList from "../chat/ChatMainList.vue";

const drawer = ref();

const openDrawer = () => {
  drawer.value.open();
};

const closeDrawer = () => {
  drawer.value.close();
};
</script>

<style lang="scss" scoped>
.mian-drawer {
  height: 100vh;
  background-color: #ffffff;
}
.mian-container {
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
}
</style>