La razón por la que el color del degradado de la etiqueta de la biblioteca de componentes vant no funciona

La razón por la que el color del degradado de la etiqueta de la biblioteca de componentes vant no funciona

Ver código fuente

Se puede ver en el código fuente que si se pasa el atributo simple, el color es el color de la fuente, de lo contrario es el color de fondo. BackgroundColor no es backgroundImage, por lo que el fondo no puede usar el color degradado como color de fondo.

Será mucho mejor después de que comprenda el principio

Solución 1 Modifique el código fuente sin afectar la función original

voluntad

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

cambie a

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

Opción 2: use / deep / para modificar el estilo del componente (ligeramente, más simple, explore usted mismo)

efecto

Ver representación de nodos

Se puede ver que esta modificación resuelve el problema desde el nivel de origen y se puede reutilizar en el futuro, siempre que el color se escriba como un atributo de degradado.

Olvidé publicar el código fuente del diseño

<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>