时间戳

首页 > 解决方案 > Vue.js v-bind:style 伪元素 :: 在内容图标之后

html - Vue.js v-bind:style 伪元素 :: 在内容图标之后

问题描述

我有一个 Bootstrap Vue ProgressBar。我需要在带有内容图标（来自FontAwsome）之后添加到类“.progress-bar”伪元素::。我也希望它是动态的。因为我已经在我的 ProgressBar 中实现了步骤（从 0 tp 100）并且我想要，当我点击时，这个图标将与 ProgressBar 线一起出现。

<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 ://vuejs.org/v2/guide/class-and-style.html

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

标签： htmlcssvue.jsbootstrap-4

解决方案

假设您有一个父组件：

<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 vars 来解决这个问题，通过一些 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>

推荐阅读