我有一个 Bootstrap Vue ProgressBar。我需要将带有内容图标(来自 FontAwesome)的伪元素
::after
添加到具有类 .progress-bar
的元素。我也希望它是动态的。我已经在我的进度条中实现了步骤(从 0 到 100),并且我希望当我单击时此图标与进度条线一起移动。
<b-progress v-bind:style="styleProgressBar" :value="counter" :max="max"></b-progress>
export default {
components:{
'navbar':navbar
},
name: "myPage",
data() {
return {
counter: 0,
max: 100,
step:1,
}
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
if (this.counter < 100) {
this.counter += 34;
}
}
}
}
我也看到了这个:https://v2.vuejs.org/v2/guide/class-and-style.html
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
假设您有一个父组件:
<div id="parent">
<ChildComponent id="child"> // Possibly from another library?
</div>
// renders ->
<div id="parent">
<div id="child">
<div id="child-component-item">
::after
</div>
</div>
</div>
挑战是为
#child-component-item:after
选择器创建绑定。
我们可以使用CSS变量来解决这个问题,通过使用一些CSS“进入”子组件。请注意,如果您的风格是
::v-deep
,您可能必须使用 scoped
。
父组件.js
<div id="parent-component" :style="{'--bgColor': bgColor}">
<ChildComponent>
</div>
<script>
export default {
data() {
return {
bgColor: 'red'
}
}
}
</script>
<style>
#child-component-item:after {
background-color: var(--bgColor)
}
</style>
我也遇到了同样的问题,但是对于
::before
,并结合var()
、url()
、多个三元运算符(我自己的情况 - 你不应该需要它),我能够修复background-image
以这样的方式:
模板
<div :style="[
case1 ? { '--iconUrl': `url(${require('../../../public/icon1.svg')})`} :
case2 ? { '--iconUrl': `url(${require('../../../public/icon2.svg')})`} :
{ '--iconUrl': `url(${require('../../../public/default.svg')})` },
]" class="myClass">
款式
div.myClass::before {
background-image: var(--iconUrl);
}
编辑: 我不必在我的
iconUrl
-> data()
中声明 return
。
您似乎想在进度条后面添加一个图标。
如果是这样,请查看下面的演示,它使用一个跨度模拟图标,然后绑定
left
来移动图标。
Vue.config.productionTip = false
app = new Vue({
el: "#app",
data: {
counter: 0,
max: 100,
intervalID: null
},
methods: {
runTask: function () {
clearInterval(this.intervalID)
this.counter = 0
this.intervalID = setInterval(() => {
this.counter = (this.counter+7)%this.max
}, 1000)
}
}
})
.badge {
background-color:green;
border: 1px solid black;
padding: 2px;
transition: 1s;
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<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.css"/>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<button @click="runTask()">Run</button>
<b-progress class="mt-1" :max="max" show-value>
<b-progress-bar :value="counter" variant="success">
<span class="badge" style="position:absolute;" :style="{'left':counter*100/max + '%'}" v-show="counter > 0">x</span>
</b-progress-bar>
</b-progress>
</div>