van-button根据参数改变字体颜色，实现高度自定义

本来van-button没有属性去单独自定义字体颜色。通过研究，我发现可以通过:style来实现这一需求。

<van-button class="case-btn" 
            :color="item.BtnBgColor"
            :style="{ color : item.BtnColor }"
            @click="jumpToUrl(item)"
>

这样子会提示warning，但是能实现我们要的背景色和按钮字体颜色都根据参数自定义。

顺便记录一下VUE的样式穿透

深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得 '更深' ，例如影响子组件，你可以使用 >>> 操作符：

<style scoped> 
.a >>> .b { /* ... */ } </style>
上述代码将会编译成：
 
.a[data-v-f3f3eg9] .b { /* … */ }
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作

例如：

1 >>> 如果vue的style使用的是css，那么则
<style lang="css" scoped>
.a >>> .b { 
 /* ... */
}
</style>
但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.

2 /deep/
<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */
 }
} 
</style>
但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。 此时我们可以使用第三种方式

3 ::v-deep 切记必须是双冒号
<style lang="scss" scoped>
.a{
 ::v-deep .b { 
  /* ... */
 }
} 
</style>
使用场景:
当我们需要覆盖 element-ui 中的样式时只能通过深度作用选择器 style 为 css 时的写法如下

.a >>> .b {
 ***
}
style使用css的预处理器(less, sass, scss)的写法如下

// 第一种/deep/
/deep/ .a {
 ***
}
 
// 第二种::v-deep
::v-deep .a{
 ***
}
建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快