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 写成渐变属性就好了
忘记贴布局源码了
tag标签渐变色没有起作用的处理我是渐变tag
// 方案二 自行探索吧// 推荐使用方案一 记得更新自己的插件库不然重新安装vant就没用了
vue渐变色背景样式
两种颜色渐变
.wrapper {height: 100vh; background-image: linear-gradient(to bottom right, #d834c2, #2088dd); overflow: hidden; }
三种颜色渐变
.wrapper {height: 100vh; background-image: linear-gradient(to bottom right, #d819bf, #2683cf, #63e4b9); overflow: hidden; }
【vant组件库之tag渐变色不起作用的原因及解决】以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
推荐阅读
- ui|Thor UI - 轻量简洁的免费开源移动端 UI 组件库，支持原生小程序和 uni-app
- Tkinter组件Entry的具体使用
- React|React UI组件库——如何快速实现antd的按需引入和自定义主题
- React|React路由组件传参的三种方式——params、search、state
- React|【React组件】github搜索案例之 父子组件通信 (附源码)
- React|【React】React组件实例的三大属性之state，props，refs（你学废了吗）
- React|【React】深入理解React组件生命周期----图文详解（含代码）
- 微信小程序|微信小程序组件
- 微信小程序|微信小程序组件、路由、组件通信、侦听器
- 2022升级！《慕慕到家》家政小程序组件化进阶实战某课完结