时间戳

首页 > 解决方案 > 如何在 b-col (bootstrap-vue) 元素中绑定自定义样式？

css - 如何在 b-col (bootstrap-vue) 元素中绑定自定义样式？

问题描述

我需要为我的<b-col />元素添加自定义样式，如下所示：

<b-container fluid class="bootstrap-container">
    <b-row id="plan-execution">
        <b-col :style="executionProgress" >Hello!</b-col>
    </b-row>
</b-container>

在executionProgress变量中，它存储了我之前计算的样式，例如：

background: linear-gradient(to right, rgba(0, 255, 0, 0.2) 0% , rgba(0, 255, 0, 0.2) 55.00%, rgba(0, 255, 0, 0.0) 57.00%) no-repeat

（样式是根据从API收集的数据计算的）

我试过：:style=""，v-bind:style=""但没有效果。

在下面的代码中，绑定样式完美

<table class="sah-table">
    <tr id="plan-execution">
        <td :style="executionProgress">Hello!</span></td>   
    </tr>
<table>

简短的问题：如何将以前填充的样式绑定到<b-col />元素？

标签： csstwitter-bootstrapvue.js

解决方案

I solved my problem a little differently than @Andrei Gheorghiu suggested.

I used "normal" <div class="col" /> instead of <b-col /> and works. My solution:

<div class="container sah-table">
    <div id="plan-execution" class="row">
        <div class="col-sm-12" :style="executionProgress">Hello</div>
    </div>
</div>

my executionProgress variable I calculate:

        calculateExecutionProgress: function(progress: number) {
            let alpha = '0.2'

            this.executionProgress = 'background: linear-gradient(to right, rgba(0, 255, 0, ' +  alpha + ') 0% , rgba(0, 255, 0, ' +  alpha + ') ' + (Math.min(progress,1) * 100).toFixed(2) + '%, rgba(0, 255, 0, 0.0) ' + ((Math.min(progress  + 0.02, 1)) * 100).toFixed(2) + '%) no-repeat';
            console.log(this.executionProgress)
        },

and it works too.

I don't like not knowing what I'm doing wrong, I have two solutions now :)

推荐阅读