微信小程序如何修改第三方组件 vant-weapp样式修改

前言：

对于vant-weapp可以局部修改，也可以全局修改，局部修改就是，需要在哪个页面中使用，就修改当前页面的样式，不会影响其他的页面，我使用的是局部修改。其实很简单 vant-weapp 已经给我们提供好了。

如，我要修改商品卡片 van-card 组件中的商品标题的样式；

修改前：

我要将它改为只显示两行。第二行超出部分用 … 显示
其实 vant-weapp 已经给我们提供好了 外部样式属性了

在wxml文件中：

<van-card
			 wx:for="{{rightConentList}}"
			 wx:key="*this"
			 num="{{item.num}}"
			 price="{{item.money}}"
			 title="{{item.title}}"
			 thumb="{{ item.img }}"
			 data-item="{{item}}"
			 bind:tap="goDetail"
			 title-class="aaa"     
			/>
			// 注意 title-class="aaa" 这个才是重点

在wxss中：

.aaa{
                height: 80rpx;
                width: 300rpx;
                // border: 1px solid black;
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; 
                // 表示只显示两行，并且第二行超出部分显示... 
            }

// 注意 这里就是你需要修改的样式

然后我的最后修改后的效果图如下：
不仅 van-card 商品组件是这样修改，我看了一下，其他组件也都提供了外部样式类，所以修改方法也都是一样的。