绑定key并在窗口大小改变后更改,避免更改配置后视图不更新,this.conf = { ...this.conf }也是避免视图不更新的。
<template>
<div class="text-wrapper" :class="'text-line'" :style="config.style">
<dv-percent-pond ref="chart" :key="key" :config="conf" :style="{width:config.style.width+'px',height:config.style.height+'px'}" />
</div>
</template>
<script>
export default {
name: 'PercentPond',
props: {
config: {
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
conf: {
value: 0
},
key: 1
}
},
computed: {
tipsStyle() {
return Object.assign({
lineHeight: this.config.style.height - Number(this.config.style.borderWidth ? this.config.style.borderWidth.replace('px', '') : 0) * 2 - 10 + 'px'
}, this.config.style)
},
style() {
const style = {}
if (Number(this.config.style.underline)) {
style.textDecoration = 'underline'
}
if (this.config.style.fontSize) {
style.fontSize = this.config.style.fontSize + 'px'
}
if (Number(this.config.style.weight)) {
style.fontWeight = 'bold'
}
if (Number(this.config.style.style)) {
style.fontStyle = 'italic'
}
if (Number(this.config.style.center)) {
style.textAlign = 'center'
}
if (Number(this.config.style.verticalAlign)) {
style.verticalAlign = 'middle'
}
return style
}
},
watch: {
'config': {
handler() {
this.change()
},
deep: true
}
},
created() {
},
mounted() {
this.change()
},
beforeDestroy() {
},
methods: {
change() {
if (this.config && this.config.params && this.config.params.result) {
this.$set(this.conf, 'value', Number(this.config.params.result))
this.conf = { ...this.conf }
// 进度池配色
if (this.config.style.startColor || this.config.style.endColor) {
this.conf.colors = [this.config.style.startColor, this.config.style.endColor]
} else {
this.conf.colors = ['#3DE7C9', '#00BAFF']
}
}
const that = this
window.addEventListener('resize', function(e) {
that.$nextTick(() => {
that.key++
})
})
// 此处为官网推荐更新数据方式
/**
状态更新
避免你的组件更新了数据后,状态却不刷新,也就是没变化,请务必看这里
组件props均未设置deep监听,刷新props时,请直接生成新的props对象(基础数据类型除外)
,或完
成赋值操作后使用ES6拓展运算符生成新的props对象
(this.someProps = { ...this.someProps })。
**/
// console.log(this.conf.colors, this.config.style)
}
}
}
</script>
<style scoped>
.text-wrapper {
width: 100%;
height: 100%;
display: table;
}
.text-body {
display: table-cell;
}
.text-no-line {
white-space:nowrap;
}
.text-line {
word-break: break-all;
word-wrap: break-word;
}
.text-wrapper p {
margin: 0;
}
.text-tip {
color: #888;
width: 100%;
height: 100%;
text-align: center;
}
.over-hide {
overflow: hidden;
}
</style>