vant组件库之tag渐变色不起作用的原因

vant组件库之tag渐变色不起作用的原因

查看源码

从源码部分可以看出，如果传入 plain 属性则color 为字体颜色，反之为背景颜色， 用的是 backgroundColor 并不是 backgroundImage 所以背景并不能使用渐变色作为背景色

明白原理之后处理就好很多了

方案一 在不影响原来功能的前提下修改源码

将

 var key = plain ? 'color' : 'backgroundColor';

修改为

	// 加入undefined 是因为color不传入时为 undefined 
    if(color!=undefined&&color.search('gradient')!=-1){
     
      var key = plain ? 'color' : 'backgroundImage';
    } else {
     
      var key = plain ? 'color' : 'backgroundColor';
    }

方案二 利用 /deep/ 修改组件的样式 （略，较简单，自行探索）

效果

查看节点渲染

可以看出这种修改是从源码层面解决问题的 而且以后都可以复用，只要将color 写成渐变属性就好了