jdcProject_front/src/layout/components/RightPanel/index.vue

<script lang="ts" setup>
import { ref } from "vue"
import { Setting } from "@element-plus/icons-vue"

const props = defineProps({
  buttonTop: {
    type: Number,
    default: 250
  }
})

const buttonTopCss = props.buttonTop + "px"
const show = ref(false)
</script>

<template>
  <div class="handle-button" @click="show = true">
    <el-icon :size="24">
      <Setting />
    </el-icon>
  </div>
  <el-drawer v-model="show" size="300px" :with-header="false">
    <slot />
  </el-drawer>
</template>

<style lang="scss" scoped>
.handle-button {
  width: 48px;
  height: 48px;
  background-color: var(--v3-rightpanel-button-bg-color);
  position: absolute;
  top: v-bind(buttonTopCss);
  right: 0px;
  font-size: 24px;
  border-radius: 6px 0 0 6px !important;
  z-index: 10;
  cursor: pointer;
  pointer-events: auto;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>