public/dataease
1
0
Fork 0
mirror of https://github.com/dataease/dataease.git synced 2026-05-23 13:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 支持背景模糊/毛玻璃效果

Browse Source
This commit is contained in:
liubo
2024-11-21 17:31:44 +08:00
parent 3563dcf625
commit 4238229ef1
10 changed files with 136 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
View File

@@ -196,6 +196,8 @@ const onMouseEnter = () => {
const componentBackgroundStyle = computed(() => {
if (config.value.commonBackground) {
const {
backdropFilterEnable,
backdropFilter,
backgroundColorSelect,
backgroundColor,
backgroundImageEnable,
@@ -243,6 +245,9 @@ const componentBackgroundStyle = computed(() => {
if (config.value.component !== 'UserView') {
style['overflow'] = 'hidden'
}
if (backdropFilterEnable) {
style['backdrop-filter'] = 'blur(' + backdropFilter + 'px)'
}
return style
}
return {}

5
core/core-frontend/src/components/data-visualization/canvas/Shape.vue
View File

@@ -881,6 +881,8 @@ const padding3D = computed(() => {
const componentBackgroundStyle = computed(() => {
if (element.value.commonBackground && element.value.component !== 'GroupArea') {
const {
backdropFilterEnable,
backdropFilter,
backgroundColorSelect,
backgroundColor,
backgroundImageEnable,
@@ -931,6 +933,9 @@ const componentBackgroundStyle = computed(() => {
if (element.value.component !== 'UserView') {
style['overflow'] = 'hidden'
}
if (backdropFilterEnable) {
style['backdrop-filter'] = 'blur(' + backdropFilter + 'px)'
}
return style
}
return {}

28
core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
View File

@@ -53,6 +53,34 @@
</el-col>
</el-row>
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
<el-checkbox
size="small"
:effect="themes"
v-model="state.commonBackground.backdropFilterEnable"
@change="onBackgroundChange"
>
{{ $t('chart.backdrop_blur') }}
</el-checkbox>
</el-form-item>
<div class="indented-container">
<div class="indented-item">
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-input-number
style="width: 100%"
:effect="themes"
controls-position="right"
size="middle"
:min="0"
:max="30"
:disabled="!state.commonBackground.backdropFilterEnable"
v-model="state.commonBackground.backdropFilter"
@change="onBackgroundChange"
/>
</el-form-item>
</div>
</div>
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
<el-checkbox
size="small"