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

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=""但没有效果。

在下面的代码中，绑定(bind)样式完美无缺

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

简短的问题:如何将我之前填充的样式绑定(bind)到 <b-col />元素？

Answer 1

将 :style 绑定(bind)为字符串似乎不适用于 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 .