DataV 数字翻牌器组件 dv-digital-flop 数字0不显示问题解决

问题:

在项目上线时我们会为了减少项目体积选择使用cdn链接将项目中用到的组件插件从打包的结构中剔除,在最近的项目中发现 DataV组件库 出现了问题,使用cdn链接时出现,数字翻牌器组件当config参数中的number 数组中的值为0时,就出现不显示的bug

测试:

下面是测试代码:

<div id="app">
    <button @click="change">切换</button>
    <dv-digital-flop :config="data" style="width:200px;height:50px;" />
  </div>

  <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        config : {
          number: [0],
          content: '{nt}个'
        },
        data:{
          number: [100],
          content: '{nt}个'
        }
      },
      methods:{
        change(){
          this.config.number[0] = 0
          this.data =  {...this.config}
          // 此处为官网推荐更新数据方式
          /**
			状态更新
			避免你的组件更新了数据后，状态却不刷新，也就是没变化，请务必看这里
			组件props均未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外）
			，或完
			成赋值操作后使用ES6拓展运算符生成新的props对象
			（this.someProps = { ...this.someProps }）。
			**/
        }
      }
    })
  </script>

切换前 :

切换后:
可以看到 数字0不显示了.

分析:

在网上搜了一下之后发现有人在github上提过issue,并且作者也回复过了在2.9.3版本已经修复过了

github原issue描述: https://github.com/DataV-Team/DataV/issues/108;
然后继续换成对应的版本测试,仍然是这种状态

但是楼主在vue项目开发阶段并没有这个问题数值为0时正常显示:

<dv-digital-flop :config="data" style="width:200px;height:50px;" />
    data(){
        return {
            
            data:{
            number: [0],
            content: '{nt}个'
            }
        }
    }

而当前使用的版本为2.10.0 在确认版本没问题后,就怀疑是不是在线上的使用的链接会不会和npm下载的不一样, 于是在项目的node_modules中找到了@jiaminghi文件中的data-view 具体路径为项目根目录/node_modules/@jiaminghi/data-view 文件夹就在node_modules的前面几个很好找
然后将 data-view文件夹里面的 dist目录里的 datav.min.vue.js 复制了一份出来

这个为npm包build后发布的文件,替换到测试的项目中发现还是没有解决该问题.
在仔细想想开发时用到的资源,与使用连接用到的资源的区别后发现:
在开发时我们使用node_modules中的这个包时 使用是/node_modules/@jiaminghi/data-view/src 中的资源,而线上使用cnd的时候使用的 dist中打包好的资源,是不是这两个地方的代码更新不同步呢? 于是我将整个@jiaminghi文件复制出来,进入data-view目录先进行npm install 安装 依赖文件, 删除data-view目录下的dist文件夹(这个是编译生成的文件夹),最后npm run build 进行构建.将生成的dist文件夹中的datav.min.vue.js 复制到测试项目中进行测试,发现问题解决.

总结

1. 将/node_modules/@jiaminghi文件夹复制一份出来
2. 进入data-view目录npm install 安装 依赖文件,
3. 删除data-view目录下的dist ,npm run build 进行构建(构建前请全局安装rollup npm install rollup -G)
4. 构建好的dist文件夹中的js就可以用到项目中啦