The reason why the tag gradient color of the vant component library does not work

The reason why the tag gradient color of the vant component library does not work

View source code

It can be seen from the source code that if the plain attribute is passed in, the color is the font color, otherwise it is the background color. The backgroundColor is not backgroundImage, so the background cannot use the gradient color as the background color.

It will be much better after you understand the principle

Solution 1 Modify the source code without affecting the original function

will

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

change into

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

Option 2: Use /deep/ to modify the style of the component (slightly, simpler, explore by yourself)

effect

View node rendering

It can be seen that this modification solves the problem from the source level and can be reused in the future, as long as the color is written as a gradient attribute.

Forgot to post the layout source code

<template>
  <div class="pd50">
    <h2>tag标签渐变色没有起作用的处理</h2>
    <van-tag color="linear-gradient(to right, #ff6034, #ee0a24)">我是渐变tag</van-tag>
  </div>
</template>

<script>
import {
    
     Tag } from "vant";
export default {
    
    
  components: {
    
    
    vanTag: Tag,
  }
};
</script>

<style lang="scss" scoped>
// 方案二 自行探索吧
// 推荐使用方案一 记得更新自己的插件库  不然重新安装vant就没用了
</style>