iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vant组件库之tag渐变色不起作用的原因及解决
  • 351
分享到

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

2024-04-02 19:04:59 351人浏览 薄情痞子
摘要

目录tag渐变色不起作用的原因方案一 在不影响原来功能的前提下修改源码方案二 利用 /deep/ 修改组件的样式Vue渐变色背景样式两种颜色渐变三种颜色渐变tag渐变色不起作用的原因

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 写成渐变属性就好了

忘记贴布局源码了

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

vue渐变色背景样式

两种颜色渐变

<style>
.wrapper {
height: 100vh;
background-image: linear-gradient(to bottom right, #d834c2, #2088dd);
overflow: hidden;
}
</style>

三种颜色渐变

<style>
.wrapper {
height: 100vh;
background-image: linear-gradient(to bottom right, #d819bf, #2683cf, #63e4b9);
overflow: hidden;
}
</style>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vant组件库之tag渐变色不起作用的原因及解决

本文链接: https://www.lsjlt.com/news/147382.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vant组件库之tag渐变色不起作用的原因及解决
    目录tag渐变色不起作用的原因方案一 在不影响原来功能的前提下修改源码方案二 利用 /deep/ 修改组件的样式vue渐变色背景样式两种颜色渐变三种颜色渐变tag渐变色不起作用的原因...
    99+
    2024-04-02
  • @Transactional注解不起作用的原因分析及解决
    目录Transactional失效场景介绍第一种第二种第三种@Transactional注解不起作用原理分析第一种不创建代理对象不进行代理调用第二种第三种Transactional失...
    99+
    2024-04-02
  • CSS中margin不起作用的原因及怎么解决
    本篇内容介绍了“CSS中margin不起作用的原因及怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2024-04-02
  • @Cacheable不起作用的原因以及bean未序列化问题怎么解决
    这篇文章给大家介绍@Cacheable不起作用的原因以及bean未序列化问题怎么解决,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。@Cacheable不起作用的原因:bean未序列化SpringMVC中将service...
    99+
    2023-06-22
  • 探讨Vue占位符不起作用的原因和解决方法
    Vue是一个流行的前端框架,用于构建现代化的Web应用程序。它提供了各种功能,例如数据绑定、组件化、路由、状态管理和构建工具等。在Vue中,占位符是一种常见的技术,用于展示模板中的数据或组件,但有时它可能不起作用。在本文中,我们将探讨Vue...
    99+
    2023-05-14
  • gitlab一段时间ssh不起作用的原因和解决方法是什么
    这篇文章主要介绍“gitlab一段时间ssh不起作用的原因和解决方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“gitlab一段时间ssh不起作用的原因和解决方法是什么”文章能帮助大家解决问...
    99+
    2023-07-05
  • React报错之组件不能作为JSX组件使用的解决方法
    目录总览返回单个JSX元素不要忘记返回值更新React类型声明总览 组件不能作为JSX组件使用,出现该错误有多个原因: 返回JSX元素数组,而不是单个元素。从组件中返回JSX元素或者...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作