vue.js v-bind：style伪元素：：后内容图标

uyhoqukh 于 2023-10-23 发布在 Vue.js

关注(0)|答案(4)|浏览(159)

我有一个Bootstrap Vue ProgressBar我需要添加一个伪元素::after与内容图标（从FontAwesome）的元素与类.progress-bar。我也希望它是动态的。我已经实现了我的ProgressBar（从0到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://v2.vuejs.org/v2/guide/class-and-style.html

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

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

vue.js

来源：https://stackoverflow.com/questions/50625973/v-bindstyle-pseudo-element-after-content-icon

4条答案

按热度按时间

ujv3wf0j1#

假设你有一个父组件：

<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“进入”子组件。请注意，如果您的样式是scoped，则可能必须使用::v-deep。

parent-component.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>

赞(0）回复(0）举报 2023-10-23

uttx8gqw2#

使用css var()
然后:style="{ '--varName': xxx}"

赞(0）回复(0）举报 2023-10-23

pexxcrt23#

我也遇到过同样的问题，但是对于::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);
}

**编辑：**我不需要在data()-> return中声明iconUrl。

赞(0）回复(0）举报 2023-10-23

im9ewurl4#

似乎你想在进度条后面添加一个图标。
如果是这样，请查看下面的演示，它使用一个span模拟图标，然后绑定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>

赞(0）回复(0）举报 2023-10-23

我来回答

vue.js v-bind：style伪元素：：后内容图标

4条答案

相关问题

热门标签

最新问答