<script setup lang="ts">
|
import BackgroundOverallCommon from '@/components/visualization/component-background/BackgroundOverallCommon.vue'
|
import { ref, toRefs } from 'vue'
|
import { useI18n } from '@/hooks/web/useI18n'
|
const emits = defineEmits(['onTitleBackgroundChange'])
|
const { t } = useI18n()
|
const activeName = ref('activeBackground')
|
|
const props = withDefaults(
|
defineProps<{
|
themes?: EditorTheme
|
element: any
|
}>(),
|
{
|
showStyle: true,
|
themes: 'dark'
|
}
|
)
|
|
const { element } = toRefs(props)
|
|
const onTitleBackgroundChange = (params, paramsName) => {
|
// do change
|
if (params) {
|
element.value.titleBackground[paramsName] = params
|
}
|
emits('onTitleBackgroundChange', element.value.titleBackground)
|
}
|
</script>
|
|
<template>
|
<div class="tab-title-background" :class="{ 'background-tabs-dark': themes === 'dark' }">
|
<el-tabs class="background-tabs" v-model="activeName" :effect="themes" stretch>
|
<el-tab-pane
|
:effect="themes"
|
:label="t('visualization.active_title_background')"
|
name="activeBackground"
|
>
|
<background-overall-common
|
:themes="themes"
|
edit-position="tab"
|
:common-background-pop="element.titleBackground.active"
|
component-position="component"
|
@onBackgroundChange="onTitleBackgroundChange($event, 'active')"
|
/>
|
</el-tab-pane>
|
<el-tab-pane
|
:effect="themes"
|
:label="t('visualization.inactive_title_background')"
|
name="inActiveBackground"
|
>
|
<div class="background-label">
|
<span>
|
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
|
<el-checkbox
|
size="small"
|
:effect="themes"
|
v-model="element.titleBackground.multiply"
|
@change="onTitleBackgroundChange(null, null)"
|
>
|
{{ t('visualization.reuse_active_title_background') }}
|
</el-checkbox>
|
</el-form-item>
|
</span>
|
</div>
|
<background-overall-common
|
v-show="!element.titleBackground.multiply"
|
:themes="themes"
|
edit-position="tab"
|
:common-background-pop="element.titleBackground.inActive"
|
component-position="component"
|
@onBackgroundChange="onTitleBackgroundChange($event, 'inActive')"
|
/>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.tab-title-background {
|
width: 100%;
|
height: 100%;
|
}
|
.background-label {
|
font-weight: 500;
|
font-size: 12px;
|
margin-bottom: 8px;
|
display: flex;
|
}
|
.background-tabs {
|
--ed-tabs-header-height: 24px;
|
|
:deep(.ed-tabs__active-bar) {
|
height: 1px;
|
}
|
|
:deep(.ed-tabs__item) {
|
font-size: 12px;
|
}
|
|
:deep(.ed-tabs__content) {
|
padding: 12px 0;
|
}
|
}
|
|
.background-tabs-dark {
|
:deep(.ed-tabs__item) {
|
&:hover {
|
color: var(--ed-color-primary);
|
}
|
color: #ebebeb;
|
}
|
:deep(.is-active) {
|
color: var(--ed-color-primary);
|
}
|
}
|
</style>
|
