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

Question

我需要为我的<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 /> 元素？

Answer 1

将 :style 绑定为字符串似乎不适用于 Bootstrap Vue 组件。您可以使用带有驼峰式 CSS 属性（即 marginTop、backgroundImage 等）和字符串值的对象将样式传递给它们。在你的情况下：

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'
}

看看它的工作原理：

new Vue({
  el: '#app',
  template: '#appTemplate',
  data: () => ({
    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'
    }
  })
})

.container {
  background-color: #eee;
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<script id="appTemplate" type="text/template">
  <b-container class="bv-example-row">
    <b-row>
      <b-col>1 of 3</b-col>
      <b-col>2 of 3</b-col>
      <b-col :style="executionProgress">3 of 3</b-col>
    </b-row>
  </b-container>
</script>
<div id="app"></div>

---

快速测试显示 Vue 组件上的字符串表示法是有效的，所以这是 Bootstrap Vue 特有的问题：

Vue.component('testComponent', {
  template: '#testTemplate',
  props: {
    style: {
      type: String | Object,
      default: ''
    }
  }
})
new Vue({
  el: '#app',
  template: '#appTemplate',
  data: () => ({
    stringStyle: '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'
  })
})

body {
  margin: 0;
}

<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>

<script id="appTemplate" type="text/template">
  <test-component :style="stringStyle" />
</script>
<script id="testTemplate" type="text/template">
  <div :style="style">
    <slot>test</slot>
  </div>
</script>
<div id="app"></div>

---

编辑：将其归档为 Bootstrap Vue 错误here。

Answer 2

我解决问题的方式与@Andrei Gheorghiu 建议的有所不同。

我使用“正常”<div class="col" /> 而不是<b-col /> 并且可以正常工作。 我的解决方案：

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

我的executionProgress 变量我计算：

        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)
        },

它也有效。

我不喜欢不知道自己做错了什么，我现在有两个解决方案:)