vant組件庫之tag漸變色不起作用的原因及解決
更新時間：2022年04月26日 10:30:34 作者：笑望灬星辰
這篇文章主要介紹了vant組件庫之tag漸變色不起作用的原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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/ 修改組件的樣式
（略，較簡單，自行探索）
效果
查看節(jié)點渲染
可以看出這種修改是從源碼層面解決問題的 而且以后都可以復用，只要將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>以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue 動態(tài)生成拓撲圖的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了Vue.js遞歸組件實現組織架構樹和選人功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了vue 封裝面包屑組件教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue返回上一頁(后退)的幾種方法與區(qū)別說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue項目引入本地bootstrap不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue獲取初始化數據是放在created還是mounted解讀
這篇文章主要介紹了Vue獲取初始化數據是放在created還是mounted的問題解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了Vue中render函數的使用方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue data中如何獲取使用store中的變量，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
最近遇到了個問題,用v-bind動態(tài)綁定img的src,圖片加載不出來,所以下面這篇文章主要給大家介紹了關于vue動態(tài)加載本地圖片的相關資料,需要的朋友可以參考下2021-07-07