大屏组件dataV使用踩坑记录

 绑定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>