在封装组件时遇到需求,在不同页面使用该组件时可以修改背景颜色,有如下方法:
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] }, }
