<div
:style="[getItemStyle,{backgroundColor:item.backgroundColor || option.backgroundColor}]">
<div :style="[getFont,{color:item.color}]">
{{ item.value }}
</div>
</div>
computed: {
getItemStyle () {
return Object.assign((() => {
if (this.isBorder) {
return {
borderImageSlice: '10 16 15 10 fill',
borderImageSource: `url(${this.option.backgroundBorder})`,
// backgroundColor: this.option.backgroundColor,
borderWidth: this.setPx(this.option.borderWidth),
// borderColor: this.option.borderColor,
borderStyle: 'solid',
minHeight: this.setPx(this.option.height),
minWidth: this.setPx(this.option.width),
display: "flex",
alignItems: "center",
flexWrap: "wrap",
justifyContent: "center"
}
}
return {}
})(), {
marginTop: this.setPx(this.option.marginTop),
marginBottom: this.setPx(this.option.marginBottom),
marginLeft: this.setPx(this.option.marginLeft),
marginRight: this.setPx(this.option.marginRight),
paddingTop: this.setPx(this.option.paddingTop),
paddingBottom: this.setPx(this.option.paddingBottom),
paddingLeft: this.setPx(this.option.paddingLeft),
paddingRight: this.setPx(this.option.paddingRight),
fontSize: this.setPx(this.option.fontSize),
letterSpacing: this.setPx(this.option.fontsplit),
color: this.option.color,
fontWeight: this.option.fontWeight,
textAlign: this.option.textAlign,
minHeight: this.setPx(this.option.height),
minWidth: this.setPx(this.option.width),
display: "flex",
alignItems: "center",
flexWrap: "wrap",
justifyContent: "center",
boxSizing:'border-box'
})
},
},
