UNIAPP和Vue自定義組件中使用行內樣式backgroundColor:rgba()修改背景顏色


在封裝組件時遇到需求,在不同頁面使用該組件時可以修改背景顏色,有如下方法:

1.使用十六進制

:style="{
    backgroundColor:bgc,
}"

 js:

props:{
     bgc:{
	    type:String,
	    default:"#FFF"
    },       
}

 2.也就是rgba修改,由於項目需求需要修改透明度,采用這種方法,要注意的就是backgroundColor:后面必須跟字符串,因此需要拼接,如果后面直接跟rgba(255,255,255,0)會導致報錯 

:style="{		    
      backgroundColor:'rgba('+bgc[0]+','+bgc[1]+','+bgc[2]+','+bgc[3]+')',
}"

 js:

props: {
    bgc:{
        type:Array,
        default:[255,0,0,0.5]
    },
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM