58 lines
2.1 KiB
JavaScript
58 lines
2.1 KiB
JavaScript
// 通过控制css变量控制过滤组件弹框样式 de-select-grid除外
|
|
import { attrsMap, styleAttrs } from '@/components/widget/DeWidget/serviceNameFn.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
attrsMap,
|
|
styleAttrs,
|
|
// 过滤组件名css变量映射
|
|
refComNameMap: {
|
|
'de-date': ['--BgDateColor', '--DateColor', '--BrDateColor'],
|
|
'de-select': ['--BgSelectColor', '--SelectColor', '--BrSelectColor'],
|
|
'de-select-tree': ['--BgSelectTreeColor', '--SelectTreeColor', '--BrSelectTreeColor'],
|
|
"de-input-search": ['--BgSearchColor', '--SearchColor', '--BrSearchColor'],
|
|
"de-number-range": ['--BgRangeColor', '--RangeColor', '--BrRangeColor']
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
cssArr: {
|
|
handler() {
|
|
if (['de-select', 'de-select-tree'].includes(this.element.component)) {
|
|
if (!this.element.options.attrs.multiple) {
|
|
return
|
|
}
|
|
this.handleElTagStyle()
|
|
};
|
|
},
|
|
deep: true
|
|
},
|
|
},
|
|
computed: {
|
|
cssArr() {
|
|
const { brColor, wordColor, innerBgColor } = this.element.style;
|
|
return { brColor, wordColor, innerBgColor }
|
|
}
|
|
},
|
|
mounted() {
|
|
this.handleCoustomStyle()
|
|
},
|
|
methods: {
|
|
typeTransform() {
|
|
let refNode = this.refComNameMap[this.element.component];
|
|
if (!refNode) return [];
|
|
return refNode
|
|
},
|
|
handleCoustomStyle() {
|
|
// 判断组件是否是在仪表板内部 否则css样式取默认值
|
|
const isPanelDe = this.$parent.handlerInputStyle;
|
|
const { brColor, wordColor, innerBgColor } = this.element.style;
|
|
const newValue = { brColor, wordColor, innerBgColor };
|
|
const cssVar = this.typeTransform();
|
|
this.styleAttrs.forEach((ele, index) => {
|
|
document.documentElement.style.setProperty(cssVar[index], !isPanelDe ? '' : newValue[ele])
|
|
})
|
|
},
|
|
}
|
|
} |