前言：

最近在弄一个微信公众号，是H5前端，用到的是vant组件。 当然Vant的官方文档以及例子都有，但是很多时候并不能满足我们的需求，需要对它进一步开发。 Vant官方文档

使用官方的例子

<van-card
      title="小明"
      desc="常出现于小学初中作文、英语、数学题、物理题、化学题
            和笑话中。此名拥有极为悠久的历史内涵，在中国的各种“名著”
            上皆有出现，体现了中国丰富的华夏文明，甚至一度代表中国冲
            出亚洲，成为了”最有影响力的名字“之一。"
      thumb="https://pic1.zhimg.com/80/v2-8f151a102586aec7cb672736497d7bd2_qhd.jpg"
      />

效果如下： 这很明显，我们要的效果并不是这样。我们想要的效果是这样的：

解决办法：

通过自定义的方式，其他属性也是如此，当不满足我们的需求，我们就去自定义修改。效果就像上面这个图片一样。

<van-card
      title="小明"
      thumb="https://pic1.zhimg.com/80/v2-8f151a102586aec7cb672736497d7bd2_qhd.jpg"
      >
      <template #desc>
           <div>常出现于小学初中作文、英语、数学题、物理题、化学题和笑话中。
                此名拥有极为悠久的历史内涵，在中国的各种“名著”上皆有出现，体现了
                中国丰富的华夏文明，甚至一度代表中国冲出亚洲，成为了”最有影响力的名字“之一。
           </div>
      </template>
</van-card>

完事跑路！