liuhuajie/lowcode-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:设置工具栏按钮颜色

Browse Source
This commit is contained in:
lhj
2024-11-14 00:19:52 +08:00
parent 91aab43ecb
commit 116e28b8fa
1 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/DynamicComponent.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div <div
style="width: fit-content; display: flex; flex-direction: column;"
v-if="componentVisible || store.designerMode" v-if="componentVisible || store.designerMode"
:id="componentId" :id="componentId"
:class="[ :class="[
@ -13,9 +14,10 @@
> >
<div v-if="isClicked" class="component-header"> <div v-if="isClicked" class="component-header">
<span>{{ componentName }}</span> <span>{{ componentName }}</span>
<button @click="handleFunction('edit')">编辑</button> <button style="color: #1057CC" @click="handleFunction('edit')">编辑</button>
<button @click="handleFunction('delete')">删除</button> <button style="color: #1057CC" @click="handleFunction('delete')">删除</button>
</div> </div>
<div class="component-content">
<component <component
:is="componentType" :is="componentType"
v-bind="componentPropsWithDisabled" v-bind="componentPropsWithDisabled"
@ -31,6 +33,7 @@
</template> </template>
</component> </component>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -92,6 +95,7 @@ const handleFunction = (action: string) => {
position: relative; position: relative;
border: 1px solid transparent; /* 默认透明边框 */ border: 1px solid transparent; /* 默认透明边框 */
transition: border 0.3s, box-shadow 0.3s; transition: border 0.3s, box-shadow 0.3s;
width: fit-content;
} }
.dynamic-component.hover-state { .dynamic-component.hover-state {
@ -104,12 +108,10 @@ const handleFunction = (action: string) => {
.component-header { .component-header {
position: absolute; position: absolute;
top: 0; top: -100px; /* 设置为负值，使工具栏浮在主内容之上 */
left: 0; left: 0;
background-color: rgba(0, 0, 0, 0.8); color: #1057CC;
color: white;
padding: 5px; padding: 5px;
border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -124,7 +126,7 @@ const handleFunction = (action: string) => {
.component-header button { .component-header button {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: white; color: #1057CC;
cursor: pointer; cursor: pointer;
margin-left: 10px; margin-left: 10px;
} }
@ -132,4 +134,10 @@ const handleFunction = (action: string) => {
.component-header button:hover { .component-header button:hover {
text-decoration: underline; text-decoration: underline;
} }
.component-content {
flex-grow: 1;
position: relative;
z-index: 1;
}
</style> </style>