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

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

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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

  • 解决vant-UI库修改样式无效的问题

    最近用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式,修改CSS样式还是无效.css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即使加了important也没用 vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中. 解决办法: 1.对于css语法起作用 使用深度选择器,使用 >>> 操作符,将scoped样式中的选择器"深入"

  • vue移动端项目vant组件库之tag详解

    vue移动端项目vant组件库之tag详解

    目录 vant组件库之tag tag标签选中(类型选择,分类选择) vant组件库之tag 直接上代码 <template>   <div class="pd50">     <!-- Tag标签的属性与Button按钮的大体相同 -->     <!-- 基础用法          其他第三方ui库的颜色可能不一致     -->     <h2>基础用法</h2>     <van-tag type=&q

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

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

    目录 tag渐变色不起作用的原因 方案一 在不影响原来功能的前提下修改源码 方案二 利用 /deep/ 修改组件的样式 vue渐变色背景样式 两种颜色渐变 三种颜色渐变 tag渐变色不起作用的原因 查看源码 从源码部分可以看出,如果传入 plain 属性则color 为字体颜色,反之为背景颜色, 用的是 backgroundColor 并不是 backgroundImage 所以背景并不能使用渐变色作为背景色 明白原理之后处理就好很多了 方案一 在不影响原来功能的前提下修改源码 将 var ke

  • 微信小程序引入Vant组件库过程解析

    微信小程序引入Vant组件库过程解析

    前期准备 Vant Weapp组件库: https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &qu

  • vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    1.前提:业务需求,最多上传6张图片,并可以实现本地预览 2.解决方法:使用vant组件库中的van-uploader实现 3.代码实现 template <div class="upload-oss"> <van-uploader :after-read="onRead" :before-read="beforeRead" :accept="fileType" v-model="fileList&

  • 详解如何搭建mpvue框架搭配vant组件库的小程序项目

    1. vant 介绍 ### 扫码体验 Vant - 轻量.可靠的移动端 Vue 小程序 组件库.由 有赞 公司开发与维护.提供了一系列美观.优质的移动端组件.vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前,请确保你已经学习过微信官方的小程序简易教程 和自定义组件介绍 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包,详见npm 支持 # npm npm i vant-weapp -S --product

  • Mpvue中使用Vant Weapp组件库的方法步骤

    一.介绍 mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑. 此教程是在dov-yih一同协助下完成.经过测试,Vant Weapp下所有组件都能够在mpvue中使用 mpvue-vant Github地址 二.使用方法 目前vant已经支持了npm的方式,但是由于node_modules目录下的代码是不会被编进dist目录下的,所以暂时只能用git方式使用. 克隆

  • 微信小程序使用Vant Weapp组件库的方法步骤

    微信小程序使用Vant Weapp组件库的方法步骤

    地址:https://youzan.github.io/vant/#/zh-CN/intro 一.引入Vant组件库 1.首先运行 npm init 就会生成 package.json 2.运行 npm i vant-weapp -S --production 3.安装成功后 点击 工具 => 构建npm 之后点击 详情 => 使用构建npm 渲染 二.使用组件库 首先在json文件中引入组件 "van-button": "vant-weapp/button&qu

  • vant-ui组件库中如何修改NavBar导航栏的样式

    目录 vant-ui组件库修改NavBar导航栏的样式 引用NavBar组件 vant组件库,修改NavBar组件的样式 vant-ui组件库修改NavBar导航栏的样式 Vant-ui组件中没有改变导航栏的样式的属性,这个时候怎么办呢 我们可以用深度选择器/deep/ 或 ::v-deep,实现对组件内部的样式修改 如下: 引用NavBar组件 <div id="div_box_nav"> <van-nav-bar title="标题" left

  • 在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】

    1如何引入组件库 有两种方法 1 npm下载 2 下载代码,下面介绍第二种方法. 在gitHub上, 链接如下  https://github.com/youzan/vant-weapp  首先在自己项目目录static下新建一个vant文件夹,用于存放组件文件,把dist文件夹下的所有文件拷贝到static下面的vant目录下,如下所示: 2 如何使用 1 在需要使用组件的页面所在的文件夹下新建一个页面main.json, (新建页面后必须npm run dev 才能生效)在其中引入相应的组件

  • 小程序组件传值和引入sass的方法(使用vant Weapp组件库)

    1.生命周期 1.onLoad():页面加载时触发,一个页面只加载一次. 2.onShow():页面显示切换的时候触发 3.onReady():页面初次渲染完成时触发.一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互 4.onHide():页面卸载时触发 2.小程序的框架: 小程序框架有两个层,一是视图层,一是逻辑层. 框架的视图层: 1.由 WXML 与 WXSS 编写,由组件来进行展示. 2.将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层. 3.WXML(WeiXi

随机推荐