vue瀑布流自适应高度（迭代总结）

1.瀑布流自适应高度

效果图如下所示

Vue中使用vue-waterfall2瀑布流

下载安装：npm install --save vue-waterfall2

之后会在node_modules生成相应的文件,感兴趣的可以仔细看一下它的源码实现

注意package.json内自动生成的

引入vue-waterfall2，网上教程大多是在main.js中引入，但其实非常不必要，最好只在用到的vue文件内引用

// 引入瀑布流 vue-waterfall2
import Vue from 'vue';
import waterfall from 'vue-waterfall2';
Vue.use(waterfall)

vue-waterfall2的api可参考文档vue-waterfall2 基于Vue.js 瀑布流组件

注意:
1.itemWidth需要与gutterWidth一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出高度再传值)
2.使用了waterfall的组件不允许使用scoped,否则样式会有问题
col默认2列，但是waterfall必须绑定数据源，若数据源取不到可能导致如下报错：
Invalid default value for prop “slideItems”: Props with type Object/Array must use a factory function to return the default value.

(props 数组／对象的默认值应当由一个工厂函数返回)，最好的解决方式就是v-if去判断

<waterfall v-if="list && list.length>0" :data="list">

另外，更改瀑布流样式时一定要注意谨慎使用!important(全局样式)，避免给之后的维护修改造成麻烦，由于css内联样式高于外联，所以宽度，间距只能通过组件的api去修改

vue组件的样式修改可通用/deep/+.样式类名

/deep/.vue-waterfall{
  width: 726px;
}

2.!!强制转换布尔型踩坑

对于字符串而言毫无问题，可对于数组而言存在特殊情况，假若数组不存在，则!!undefined返回的是false


浏览器console打印结果）
假若数组存在但为空,则!![]返回的是true，

这就存在歧义，可能导致逻辑判断有遗漏，所以!!强制转换数组前一定要加上对数组长度的判断(list && list.length >0)

3.循环遍历对象内的数组

循环遍历对象内的数组，只取某一类型其中的对象属性值
如下，只需要拿到第一个promType为1的promInfo值

"itemOut": {
        "itemName": "商品名称名称111", 
        "promList": [
          {
            "promInfo": "满100减10元",
            "promType": 1
          },
          {
            "promInfo": "满200减30元",
            "promType": 1
          }
        ]
}

可以使用find方法来实现，但是要注意它的用法和api
find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

所以若promInfos未定义，则会导致出现promInfo of undefined报错，指向的就是promInfos undefined

4.金额小数点后的字体和前面的大小不同

实现效果如下图

对数据进行处理：裁剪分割不同样式显示

//1.分割价钱 
 let splitPrice = this.data.itemOut.finalPrice.split(".")
 //2.重新赋值
 this.price = `<span style="font-size:12px;">¥</span>${splitPrice[0]}.<span style="font-size:13px;">${splitPrice[1]}</span>`

这个需要v-html来进行解析，不然span标签会不生效

<div class="double__info__redprice" v-html="this.price">>{{this.price}}</div>