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組件之高德地圖地址選擇功能的實(shí)例代碼
這篇文章主要介紹了Vue組件之高德地圖地址選擇功能的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
vue去掉嚴(yán)格開(kāi)發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式
這篇文章主要介紹了vue去掉嚴(yán)格開(kāi)發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue?mergeProps用法詳細(xì)講解
這篇文章主要介紹了Vue?mergeProps用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-10-10
vue實(shí)現(xiàn)數(shù)字翻頁(yè)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字翻頁(yè)動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
vue3.0 CLI - 2.1 - component 組件入門教程
這篇文章主要介紹了vue3.0 CLI - 2.1 - component 組件入門教程,本文主要的關(guān)注點(diǎn)就是組件，本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2018-09-09
vue父子組件的數(shù)據(jù)傳遞示例
這篇文章主要介紹了vue父子組件的數(shù)據(jù)傳遞示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
基于 flexible 的 Vue 組件：Toast -- 顯示框效果
這篇文章主要介紹了基于 flexible 的 Vue 組件：Toast -- 顯示框效果,需要的朋友可以參考下
2017-12-12
深入Vue-Router路由嵌套理解
這篇文章主要介紹了深入Vue-Router路由嵌套理解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue2實(shí)現(xiàn)簡(jiǎn)易時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)簡(jiǎn)易時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
vue源碼之批量異步更新策略的深入解析
這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料，關(guān)于vue異步更新是我們?nèi)粘ｉ_(kāi)發(fā)中經(jīng)常遇到的一個(gè)功能，需要的朋友可以參考下
2021-05-05