vue h5给css传参,动态显示图片

只贴关键代码:

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);

}


最终效果

3、html传参数-css接受参数

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容