84 lines
1.9 KiB
Vue
84 lines
1.9 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from "vue";
|
||
|
|
import { RightOutlined, LeftOutlined } from "@ant-design/icons-vue";
|
||
|
|
|
||
|
|
const open = ref(true);
|
||
|
|
|
||
|
|
// 切换抽屉状态
|
||
|
|
const toggleDrawer = () => {
|
||
|
|
open.value = !open.value;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<!-- <div class="rightContentDrawer"> -->
|
||
|
|
<!-- 保持原有的 drawer 参数不变 -->
|
||
|
|
<a-drawer
|
||
|
|
:mask="false"
|
||
|
|
placement="right"
|
||
|
|
:open="true"
|
||
|
|
width="450"
|
||
|
|
:closable="false"
|
||
|
|
:headerStyle="{ color: '#FAFCFE' }"
|
||
|
|
:rootClassName="{ 'drawer-collapsed': !open }"
|
||
|
|
:getContainer="false"
|
||
|
|
:destroyOnClose="false"
|
||
|
|
>
|
||
|
|
<!-- 箭头按钮 - 始终显示在左侧中间位置 -->
|
||
|
|
<div class="toggle-button" :class="{ collapsed: !open }" @click="toggleDrawer">
|
||
|
|
<span class="arrow-icon" v-if="!open">
|
||
|
|
<LeftOutlined />
|
||
|
|
</span>
|
||
|
|
<span class="arrow-icon" v-else>
|
||
|
|
<RightOutlined />
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<slot />
|
||
|
|
</a-drawer>
|
||
|
|
<!-- </div> -->
|
||
|
|
</template>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.rightContentDrawer {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-button {
|
||
|
|
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/bg-toggle.svg');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
|
||
|
|
&.collapsed {
|
||
|
|
left: -20px;
|
||
|
|
border-radius: 0 4px 4px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow-icon {
|
||
|
|
color: rgb(81, 131, 169);
|
||
|
|
font-size: 18px;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-drawer) {
|
||
|
|
|
||
|
|
.ant-drawer-content-wrapper {
|
||
|
|
right: 0;
|
||
|
|
bottom: 0px;
|
||
|
|
border: 2px solid #c5d6e2 !important;
|
||
|
|
box-shadow: 3px 3px 3px 9px #e5edf3 !important;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|