vant組件庫(kù)之tag漸變色不起作用的原因及解決
更新時(shí)間：2022年04月26日 10:30:34 作者：笑望灬星辰
這篇文章主要介紹了vant組件庫(kù)之tag漸變色不起作用的原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
tag漸變色不起作用的原因
查看源碼
從源碼部分可以看出，如果傳入 plain 屬性則color 為字體顏色，反之為背景顏色， 用的是 backgroundColor 并不是 backgroundImage 所以背景并不能使用漸變色作為背景色
明白原理之后處理就好很多了
方案一 在不影響原來(lái)功能的前提下修改源碼
將
var key = plain ? 'color' : 'backgroundColor';
修改為
? ?// 加入undefined 是因?yàn)閏olor不傳入時(shí)為 undefined?
? ? if(color!=undefined&&color.search('gradient')!=-1){
? ? ? var key = plain ? 'color' : 'backgroundImage';
? ? } else {
? ? ? var key = plain ? 'color' : 'backgroundColor';
? ? }方案二 利用 /deep/ 修改組件的樣式
（略，較簡(jiǎn)單，自行探索）
效果
查看節(jié)點(diǎn)渲染
可以看出這種修改是從源碼層面解決問(wèn)題的 而且以后都可以復(fù)用，只要將color 寫(xiě)成漸變屬性就好了
忘記貼布局源碼了
<template> ? <div class="pd50"> ? ? <h2>tag標(biāo)簽漸變色沒(méi)有起作用的處理</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> // 方案二 自行探索吧 // 推薦使用方案一 記得更新自己的插件庫(kù) ?不然重新安裝vant就沒(méi)用了 </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>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 動(dòng)態(tài)生成拓?fù)鋱D的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹(shù)和選人功能
這篇文章主要介紹了Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹(shù)和選人功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了vue 封裝面包屑組件教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue返回上一頁(yè)(后退)的幾種方法與區(qū)別說(shuō)明
這篇文章主要介紹了vue返回上一頁(yè)(后退)的幾種方法與區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目引入本地bootstrap不生效問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目引入本地bootstrap不生效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue獲取初始化數(shù)據(jù)是放在created還是mounted解讀
這篇文章主要介紹了Vue獲取初始化數(shù)據(jù)是放在created還是mounted的問(wèn)題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了Vue中render函數(shù)的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue data中如何獲取使用store中的變量，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
最近遇到了個(gè)問(wèn)題,用v-bind動(dòng)態(tài)綁定img的src,圖片加載不出來(lái),所以下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)加載本地圖片的相關(guān)資料,需要的朋友可以參考下2021-07-07