refactor: RightPanel Component
This commit is contained in:
parent
d4d3d06a5a
commit
d77d96800b
@ -2,18 +2,19 @@
|
|||||||
import { ref } from "vue"
|
import { ref } from "vue"
|
||||||
import { Setting } from "@element-plus/icons-vue"
|
import { Setting } from "@element-plus/icons-vue"
|
||||||
|
|
||||||
defineProps({
|
const props = defineProps({
|
||||||
buttonTop: {
|
buttonTop: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 250
|
default: 250
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const buttonTopCss = props.buttonTop + "px"
|
||||||
const show = ref(false)
|
const show = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="handle-button" :style="{ top: buttonTop + 'px' }" @click="show = true">
|
<div class="handle-button" @click="show = true">
|
||||||
<el-icon :size="24">
|
<el-icon :size="24">
|
||||||
<Setting />
|
<Setting />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
@ -29,8 +30,8 @@ const show = ref(false)
|
|||||||
height: 48px;
|
height: 48px;
|
||||||
background-color: var(--v3-rightpanel-button-bg-color);
|
background-color: var(--v3-rightpanel-button-bg-color);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: v-bind(buttonTopCss);
|
||||||
right: 0px;
|
right: 0px;
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
border-radius: 6px 0 0 6px !important;
|
border-radius: 6px 0 0 6px !important;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user