forked from github/dataease
refactor: 背景支持颜色图片同时选择
This commit is contained in:
wangjiahao
parent
2873c861e5
commit
9dbe95ec03
@ -552,16 +552,22 @@ export default {
|
||||
mainSlotStyleInner() {
|
||||
const style = {}
|
||||
if (this.element.commonBackground) {
|
||||
let colorRGBA = ''
|
||||
if (this.element.commonBackground.backgroundColorSelect) {
|
||||
colorRGBA = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha)
|
||||
}
|
||||
style['padding'] = (this.element.commonBackground.innerPadding || 0) + 'px'
|
||||
style['border-radius'] = (this.element.commonBackground.borderRadius || 0) + 'px'
|
||||
if (this.element.commonBackground.enable) {
|
||||
if (this.element.commonBackground.backgroundType === 'innerImage' && this.element.commonBackground.innerImage) {
|
||||
style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat`
|
||||
} else if (this.element.commonBackground.backgroundType === 'outerImage' && this.element.commonBackground.outerImage) {
|
||||
style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat`
|
||||
} else if (this.element.commonBackground.backgroundType === 'color') {
|
||||
style['background-color'] = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha)
|
||||
if (this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string') {
|
||||
style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat ${colorRGBA}`
|
||||
} else if (this.element.commonBackground.backgroundType === 'outerImage' && typeof this.element.commonBackground.outerImage === 'string') {
|
||||
style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat ${colorRGBA}`
|
||||
} else {
|
||||
style['background-color'] = colorRGBA
|
||||
}
|
||||
} else {
|
||||
style['background-color'] = colorRGBA
|
||||
}
|
||||
}
|
||||
return style
|
||||
|
||||
@ -125,18 +125,24 @@ export default {
|
||||
if (this.config.commonBackground) {
|
||||
style['padding'] = (this.config.commonBackground.innerPadding || 0) + 'px'
|
||||
style['border-radius'] = (this.config.commonBackground.borderRadius || 0) + 'px'
|
||||
let colorRGBA = ''
|
||||
if (this.config.commonBackground.backgroundColorSelect) {
|
||||
colorRGBA = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha)
|
||||
}
|
||||
if (this.config.commonBackground.enable) {
|
||||
if (this.config.commonBackground.backgroundType === 'innerImage' && this.config.commonBackground.innerImage) {
|
||||
if (this.config.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string') {
|
||||
let innerImage = this.config.commonBackground.innerImage
|
||||
if (this.screenShot) {
|
||||
innerImage = innerImage.replace('svg', 'png')
|
||||
}
|
||||
style['background'] = `url(${innerImage}) no-repeat`
|
||||
} else if (this.config.commonBackground.backgroundType === 'outerImage' && this.config.commonBackground.outerImage) {
|
||||
style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat`
|
||||
} else if (this.config.commonBackground.backgroundType === 'color') {
|
||||
style['background-color'] = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha)
|
||||
style['background'] = `url(${innerImage}) no-repeat ${colorRGBA}`
|
||||
} else if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') {
|
||||
style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat ${colorRGBA}`
|
||||
} else {
|
||||
style['background-color'] = colorRGBA
|
||||
}
|
||||
} else {
|
||||
style['background-color'] = colorRGBA
|
||||
}
|
||||
style['overflow'] = 'hidden'
|
||||
}
|
||||
|
||||
@ -19,9 +19,10 @@ export const BASE_MOBILE_STYLE = {
|
||||
// 组件仪表板样式
|
||||
export const COMMON_BACKGROUND = {
|
||||
enable: true,
|
||||
backgroundType: 'color',
|
||||
backgroundColorSelect: false,
|
||||
backgroundType: 'innerImage',
|
||||
color: '#FFFFFF',
|
||||
innerImage: null,
|
||||
innerImage: 'board/blue_1.svg',
|
||||
outerImage: null,
|
||||
alpha: 100,
|
||||
borderRadius: 5,
|
||||
@ -31,9 +32,10 @@ export const COMMON_BACKGROUND = {
|
||||
// 空组件仪表板样式
|
||||
export const COMMON_BACKGROUND_NONE = {
|
||||
enable: false,
|
||||
backgroundType: 'color',
|
||||
backgroundColorSelect: false,
|
||||
backgroundType: 'innerImage',
|
||||
color: '#FFFFFF',
|
||||
innerImage: null,
|
||||
innerImage: 'board/blue_1.svg',
|
||||
outerImage: null,
|
||||
alpha: 100,
|
||||
borderRadius: 0,
|
||||
|
||||
@ -114,6 +114,12 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
|
||||
item.mobileStyle = (item.mobileStyle || deepCopy(BASE_MOBILE_STYLE))
|
||||
item.hyperlinks = (item.hyperlinks || deepCopy(HYPERLINKS))
|
||||
item.commonBackground = item.commonBackground || deepCopy(COMMON_BACKGROUND_NONE)
|
||||
// Multi choice of colors and pictures
|
||||
if (item.commonBackground.backgroundType === 'color') {
|
||||
item.commonBackground['backgroundColorSelect'] = item.commonBackground.enable
|
||||
item.commonBackground.enable = false
|
||||
item.commonBackground.backgroundType = 'innerImage'
|
||||
}
|
||||
})
|
||||
// 初始化密度为最高密度
|
||||
componentStyle.aidedDesign.matrixBase = 4
|
||||
|
||||
@ -24,6 +24,21 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 40px;overflow: hidden;">
|
||||
<el-col :span="3" style="padding-left: 10px;padding-top: 5px">
|
||||
<el-checkbox v-model="curComponent.commonBackground.backgroundColorSelect">颜色</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="1" style="padding-top: 5px">
|
||||
<el-color-picker v-model="curComponent.commonBackground.color" :disabled="!curComponent.commonBackground.backgroundColorSelect" size="mini" class="color-picker-style" :predefine="predefineColors" />
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<span class="params-title-small">不透明度：</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-slider v-model="curComponent.commonBackground.alpha" :disabled="!curComponent.commonBackground.backgroundColorSelect" show-input :show-input-controls="false" input-size="mini" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 50px">
|
||||
<el-col :span="3" style="padding-left: 10px;padding-top: 5px">
|
||||
<el-checkbox v-model="curComponent.commonBackground.enable">{{ $t('panel.background') }}</el-checkbox>
|
||||
@ -34,21 +49,7 @@
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="curComponent.commonBackground.enable">
|
||||
<el-row style="height: 40px;overflow: hidden">
|
||||
<el-col :span="3" style="padding-left: 10px;padding-top: 5px">
|
||||
<el-radio v-model="curComponent.commonBackground.backgroundType" label="color" @change="onChangeType">颜色</el-radio>
|
||||
</el-col>
|
||||
<el-col :span="1" style="padding-top: 5px">
|
||||
<el-color-picker v-model="curComponent.commonBackground.color" size="mini" class="color-picker-style" :predefine="predefineColors" />
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<span class="params-title-small">不透明度：</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-slider v-model="curComponent.commonBackground.alpha" show-input :show-input-controls="false" input-size="mini" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="curComponent.commonBackground.enable" style="padding-left: 20px">
|
||||
<el-row style="height: 80px;margin-top:10px;margin-bottom:20px;overflow: hidden">
|
||||
<el-col :span="3" style="padding-left: 10px">
|
||||
<el-radio v-model="curComponent.commonBackground.backgroundType" label="outerImage" @change="onChangeType">{{ $t('panel.photo') }}</el-radio>
|
||||
@ -169,10 +170,7 @@ export default {
|
||||
this.$emit('backgroundSetClose')
|
||||
},
|
||||
commitStyle() {
|
||||
const canvasStyleData = deepCopy(this.canvasStyleData)
|
||||
canvasStyleData.panel = this.panel
|
||||
this.$store.commit('setCanvasStyle', canvasStyleData)
|
||||
this.$store.commit('recordSnapshot', 'commitStyle')
|
||||
this.$store.commit('recordSnapshot')
|
||||
},
|
||||
onChangeType() {
|
||||
this.commitStyle()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user