只贴关键代码:
h5代码 css 传参:
<div class="center-header-view" :style="'--color:#ff0000;--color1:#ff00ff'">测试</div>
.center-header-view{
color:var(--color);
&::before{
content:'sdf';
color:var(--color1)
}
}
h5代码 css 传参 动态设置伪类的content(限数字):
<div class="box" :style="'--test-value:60'">
<p class="test">sdf
</div>
.test::after {
counter-reset:progress var(--test-value);
content:counter(progress)'hPa';
background-color:blue;
}
计算属性动态加载图片 资源:
computed: {
weatherImg() {
return function (imgName) {
const context =require.context('../../../assets/images/warning/', true, /\.(png|jpg|svg)$/);
return context('./' + imgName +'.svg');
};
}
},
测试数据(图表在本地):
warningDataList: [
{
img_x:'156px',
img_y:'92px',
img_icon:'icon_blue_blue'
},
{
img_x:'196px',
img_y:'72px',
img_icon:'icon_blue_red'
},
{
img_x:'256px',
img_y:'122px',
img_icon:'icon_rain_yellow'
},
{
img_x:'126px',
img_y:'52px',
img_icon:'icon_hail_orange'
}
],
css代码(接收参数):
.warning-icon{
top:var(--warning-icon-x);
}

