DataV中使用initWH方法防止边框内的组件重新渲染失效

一、DataV在Vue2的使用

介绍 | DataVVue 大屏数据展示组件库http://datav.jiaminghi.com/guide/

1. 安装插件

npm i @jiaminghi/data-view

2. 引入

import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

3. 应用

<dv-border-box-12>

        ...

</dv-border-box-12>

二、使用边框遇到的问题

很多管理系统的标题旁边都包含着展开收缩左侧的menu，造成边框不能自适应的情况，这就需要使用initWH方法重置边框。

 watch: {
    '$store.state.app.sidebar.opened' () {
      setTimeout(() => {
        this.$refs.borderRef.initWH();
        this.$refs.borderRef2.initWH();
        this.$refs.borderRef3.initWH();
        this.$refs.borderRef4.initWH();
      }, 300)
    }
  },

        watch监听菜单栏的展开与否。因为是四个边框，所以分别给四个边框都加了ref（还没找到其他简便的方法！欢迎提供~），加上重置这个方法就ok了！