用 vant 组件 仿京东 选择按钮 面板（更改 van-tag 字体颜色）

一、前言

vant组件 是微信小程序里非常热门的 UI 组件。选用组件而不是自己手写的原因也很明显：降低复杂度，隐藏无关细节。接下来主要介绍，如何在微信小程序上 仿造出下方的 京东选择按钮面板：

二、组件选择：van-tag

为什么不选择 van-button 呢？因为 van-button不支持 自定义 背景颜色（background-color），除非更改 van-button 的源码。

三、尝试过程

然后接下来，需要解决的问题，就是字体的颜色问题。van-tag只提供了 更改背景色的接口，van-tag内部的字体颜色默认是白色，我们期望的颜色是深灰色。怎么解决这个问题呢？

我一开始的设想是使用 van-tag 的 custom-class 这个接口，传入颜色为 深灰色的类（我传入的类的名字叫 tag）。但是在开发者工具中预览，发现颜色并没有更改。在于是使用调试面板审查 css，发现传入的类的优先级是最低的，所以如果和原组件的类的属性冲突的话，传入的属性是会被原属性覆盖的 ：

于是又想到了第二个解决办法，向van-tag中传入组件：
因为 van-tag 和 van-button 不同， van-tag 内是支持传入一个自定义组件的，所以我们可以更改自定义组件的颜色，来覆盖van-tag的默认颜色。且 css 中子级元素的类优先级是大于父级元素，所以理论上是可以的。

更改代码如下：

	你好啊

wxss 代码：

.tag{margin: 5px;}
.color{color: #666;padding:0 8px;}

至此，按钮面板上的按钮问题已经解决了，接下来无非是用 flex 去处理布局问题。
这里就不再赘叙。