vu2 :style 如何实现 颜色值 rgba 半透明 十六进制颜色值转RGB方法
效果:
view部分:
<view :style="{backgroundColor:'rgba('+convertHexToRgb(info.bg_color)+',0.25)'}">
Text
</view>备注:
info.bg_color是变量 示例:#00a2ff
js部分:
methods: {
//十六进制颜色值转RGB方法
hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
},
convertHexToRgb(hexColor) {
let rgb = this.hexToRgb(hexColor);
let res = rgb.r+','+rgb.g+','+rgb.b;
console.log(`rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`);
return res;
}
}