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

它也可以工作。

我不喜欢不知道自己在做什么错，我现在有两种解决方案：）

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

2 个答案: