vu2 :style 如何实现 颜色值 rgba 半透明 十六进制颜色值转RGB方法


效果:

image
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;
	}
}