Vue.js v-bind:style 伪元素::内容图标之后 [英] Vue.js v-bind:style Pseudo element :: after content icon

问题描述

我有一个 Bootstrap Vue ProgressBar.我需要添加到类.progress-bar"中伪元素 :: after with content 图标(来自 FontAwsome).我也希望它是动态的.因为我已经在我的 ProgressBar 中实现了步骤(从 0 tp 100 开始)并且我想要，当我点击时，这个图标将与 ProgressBar 线一起出现.

我也看到了这个:https://vuejs.org/v2/指南/class-and-style.html

数据: {样式对象:{红色'，字体大小:'13px'}}

解决方案

您似乎想在进度条后面添加一个图标.

如果是这样，请查看下面的演示，它使用一个span模拟图标，然后绑定left来移动图标.

Vue.config.productionTip = false应用程序 = 新的 Vue({el: "#app",数据: {计数器:0，最大:100，间隔ID:空},方法: {运行任务:函数(){清除间隔(this.intervalID)this.counter = 0this.intervalID = setInterval(() => {this.counter = (this.counter+7)%this.max}, 1000)}}})

.badge {背景颜色:绿色；边框:1px纯黑色；填充:2px；过渡:1s；}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"><;/脚本><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="应用程序"><button @click="runTask()">运行</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>

I have a Bootstrap Vue ProgressBar. I need to add to the class ".progress-bar" pseudo element :: after with content icon (from FontAwsome). And I also want it to be dynamic. Because I have implemented steps in my ProgressBar(from 0 tp 100) and i want, when i click, this icon will go with ProgressBar line.

<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;
                }
            }
        }
    }

I also saw this: https://vuejs.org/v2/guide/class-and-style.html

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

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

解决方案

It seems you'd like to add one icon following the progress bar.

If so, check below demo, it uses one span simulate the icon, then bind left to move the icon.

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/vue@2.5.16/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>

这篇关于Vue.js v-bind:style 伪元素::内容图标之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！