WholeProcessPlatform/frontend/src/components/RightDrawer/index.vue

<!-- SidePanelItem.vue -->
<template>
  <div class="rightContentDrawer">
    <div @click="drawerOpen = !drawerOpen" class="drawerController1"
      >
      <img src="../../assets/components/arrow-left.png" alt="">
    </div>
    <a-drawer :get-container="false"
      :style="{ position: 'absolute' }" v-model:open="drawerOpen" :mask="false" placement="right" width="450" :closable="false"
      @after-open-change="afterOpenChange" :headerStyle="{ color: '#FAFCFE' }">
      <div @click="drawerOpen = !drawerOpen" class="drawerController">
        <img src="../../assets/components/arrow-right.png" alt="">
      </div>
      <div style="padding:16px 16px 0">
        <slot />
      </div>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref, defineOptions, watch } from 'vue';

// 定义组件名（便于调试和递归）
defineOptions({
  name: 'rightDrawer'
});
const drawerOpen = ref(true);
const shujv = ref('123456789');
// const afterOpenChange = (open) => {
//   if (!open) {
//     drawerOpen.value = false;
//   }
// };
</script>

<style lang="scss">
.rightContentDrawer {
  height: 100%;
  position: relative;
  box-sizing: border-box;
  // 修复收起时布局塌陷问题
  flex-shrink: 0;

  .drawerController1 {
    width: 18px;
    position: absolute;
    right: 0px;
    cursor: pointer;
    z-index: 10;
    height: 88px;
    line-height: 88px;
    top: 45%;
    // left: -18px;
    vertical-align: middle;
    background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
  }

}

.ant-drawer {
  margin: 5px 0px;
.ant-drawer-content{
  overflow:visible;
}
  .ant-drawer-content-wrapper {
    border: 2px solid #c5d6e2 !important;
    box-shadow: 3px 3px 3px 9px #e5edf3 !important;
  }

  .ant-drawer-body {
    padding: 0px !important;
  }
}

.drawerController {
  width: 18px;
  position: absolute;
  right: 10px;
  cursor: pointer;
  z-index: 10;
  height: 88px;
  line-height: 88px;
  top: 45%;
  left: -18px;
  vertical-align: middle;
  background-image: url(../../assets/components/bg-toggle.e1dabcf3.svg);
  background-repeat: no-repeat;
  display: flex;
    justify-content: center;
    align-items: center;
}
</style>