vant組件庫之tag漸變色不起作用的原因及解決
更新時(shí)間：2022年04月26日 10:30:34 作者：笑望灬星辰
這篇文章主要介紹了vant組件庫之tag漸變色不起作用的原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
tag漸變色不起作用的原因
查看源碼
從源碼部分可以看出，如果傳入 plain 屬性則color 為字體顏色，反之為背景顏色， 用的是 backgroundColor 并不是 backgroundImage 所以背景并不能使用漸變色作為背景色
明白原理之后處理就好很多了
方案一 在不影響原來功能的前提下修改源碼
將
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é)點(diǎn)渲染
可以看出這種修改是從源碼層面解決問題的 而且以后都可以復(fù)用，只要將color 寫成漸變屬性就好了
忘記貼布局源碼了
<template> ? <div class="pd50"> ? ? <h2>tag標(biāo)簽漸變色沒有起作用的處理</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>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue組件之 高德地圖地址選擇功能的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
vue去掉嚴(yán)格開發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式
這篇文章主要介紹了vue去掉嚴(yán)格開發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue?mergeProps用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
vue實(shí)現(xiàn)數(shù)字翻頁動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字翻頁動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
vue3.0 CLI - 2.1 - component 組件入門教程
這篇文章主要介紹了vue3.0 CLI - 2.1 - component 組件入門教程,本文主要的關(guān)注點(diǎn)就是組件，本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue父子組件的數(shù)據(jù)傳遞示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
基于 flexible 的 Vue 組件：Toast -- 顯示框效果
這篇文章主要介紹了基于 flexible 的 Vue 組件：Toast -- 顯示框效果,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了深入Vue-Router路由嵌套理解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)簡易時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料，關(guān)于vue異步更新是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個(gè)功能，需要的朋友可以參考下2021-05-05