forked from github/dataease
refactor(数据大屏): 组件通用样式区域样式组件优化
This commit is contained in:
wangjiahao
parent
2db5b0dc9c
commit
5f6a0bde3c
@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<el-row class="custom-row">
|
||||
<el-row style="margin-top: 8px">
|
||||
<el-space wrap>
|
||||
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
|
||||
<el-color-picker
|
||||
:title="t('chart.text_color')"
|
||||
v-model="titleForm.color"
|
||||
class="color-picker-style"
|
||||
is-custom
|
||||
:predefine="state.predefineColors"
|
||||
@change="changeTitleStyle('color')"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
|
||||
<el-select
|
||||
style="width: 56px"
|
||||
:effect="themes"
|
||||
:title="t('chart.text_fontsize')"
|
||||
v-model="titleForm.fontSize"
|
||||
:placeholder="'大小'"
|
||||
size="small"
|
||||
@change="changeTitleStyle('fontSize')"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fontSizeList"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.bolder') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: titleForm.isBolder }"
|
||||
@click="checkBold"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_bold_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.italic') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: titleForm.isItalic }"
|
||||
@click="checkItalic"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_italic_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<div class="m-divider"></div>
|
||||
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_left') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: titleForm.hPosition === 'left' }"
|
||||
@click="setPosition('left')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_left-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_center') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: titleForm.hPosition === 'center' }"
|
||||
@click="setPosition('center')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_center-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_right') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: titleForm.hPosition === 'right' }"
|
||||
@click="setPosition('right')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_right-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-space>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref, toRefs } from 'vue'
|
||||
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import Icon from '@/components/icon-custom/src/Icon.vue'
|
||||
const { t } = useI18n()
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
themes?: EditorTheme
|
||||
element: any
|
||||
}>(),
|
||||
{
|
||||
themes: 'dark'
|
||||
}
|
||||
)
|
||||
|
||||
const { themes, element } = toRefs(props)
|
||||
const emits = defineEmits(['onTextChange'])
|
||||
|
||||
const titleForm = computed<any>(() => dvMainStore.canvasStyleData.component.chartTitle)
|
||||
const state = reactive({
|
||||
fontSize: [],
|
||||
isSetting: false,
|
||||
predefineColors: COLOR_PANEL
|
||||
})
|
||||
const fontSizeList = computed(() => {
|
||||
const arr = []
|
||||
for (let i = 10; i <= 60; i = i + 2) {
|
||||
arr.push({
|
||||
name: i + '',
|
||||
value: i + ''
|
||||
})
|
||||
}
|
||||
return arr
|
||||
})
|
||||
|
||||
const changeTitleStyle = modifyName => {
|
||||
titleForm.value['modifyName'] = modifyName
|
||||
emits('onTextChange', titleForm.value)
|
||||
}
|
||||
|
||||
function checkBold() {
|
||||
titleForm.value.isBolder = !titleForm.value.isBolder
|
||||
changeTitleStyle('isBolder')
|
||||
}
|
||||
function checkItalic() {
|
||||
titleForm.value.isItalic = !titleForm.value.isItalic
|
||||
changeTitleStyle('isItalic')
|
||||
}
|
||||
|
||||
function setPosition(p: 'left' | 'center' | 'right') {
|
||||
titleForm.value.hPosition = p
|
||||
changeTitleStyle('hPosition')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.custom-item-text {
|
||||
font-size: 12px !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 20px;
|
||||
color: #646a73 !important;
|
||||
}
|
||||
|
||||
:deep(.ed-radio) {
|
||||
margin-right: 0;
|
||||
}
|
||||
:deep(.ed-radio-group) {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
:deep(.ed-checkbox__input) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.ed-checkbox.is-checked) {
|
||||
.ed-checkbox__label {
|
||||
.bash-icon {
|
||||
background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
|
||||
border-radius: 4px;
|
||||
color: var(--ed-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ed-radio.is-checked) {
|
||||
.ed-radio__label {
|
||||
.bash-icon {
|
||||
background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ed-radio__input) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.ed-radio__input.is-checked) {
|
||||
.ed-radio__inner {
|
||||
padding: 4px;
|
||||
background-color: green;
|
||||
background-clip: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
.bash-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.custom-divider {
|
||||
margin: 5px 0 0 8px;
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
background-color: rgba(31, 35, 41, 0.15);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
font-size: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
padding-top: 1px;
|
||||
|
||||
color: #1f2329;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&.dark {
|
||||
color: #a6a6a6;
|
||||
&.active {
|
||||
color: var(--ed-color-primary);
|
||||
background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--ed-color-primary);
|
||||
background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(31, 35, 41, 0.1);
|
||||
}
|
||||
}
|
||||
.m-divider {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: rgba(31, 35, 41, 0.15);
|
||||
}
|
||||
.form-item {
|
||||
&.no-margin-bottom {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user