只貼關(guān)鍵代碼：
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 傳參 動態(tài)設(shè)置偽類的content(限數(shù)字)：
<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;
}
計算屬性動態(tài)加載圖片 資源：
computed: {
weatherImg() {
return function (imgName) {
const context =require.context('../../../assets/images/warning/', true, /\.(png|jpg|svg)$/);
? ? ? ? ? ? return context('./' + imgName +'.svg');
? ? ? ? };
? ? }
},
測試數(shù)據(jù)（圖表在本地）：
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代碼(接收參數(shù)）：
.warning-icon{
top:var(--warning-icon-x);
}
