我需要为我的 <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 />
元素?
最佳答案
将 :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 .
关于css - 如何在 b-col (bootstrap-vue) 元素中绑定(bind)自定义样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56401806/