vue.js - 无法更改类型（危险，成功）并在 vue 表带上添加动画

Question

我想使用 vue strap 制作进度条。我在这个链接上安装了 vue strap

这个链接

现在我添加了一个进度条，这个进度条正在显示，这个进度条只显示原色，不能显示动画。

 <template>
        <div class="progress">
            <progressbar now="99"  type="danger" striped animated ></progressbar>
        </div>
</template>

<script>
    import { progressbar } from 'vue-strap'

    export default {
        components: {
          progressbar
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

使用此代码，此类型是主要的，并且此动画不起作用。我将浏览器从 chrome 更改为 mozila，但它仍然无法正常工作。我的浏览器是最新的。

这有什么问题？我不知道为什么动画不起作用

Answer 1

在进度条动画方面，VueStrap 库中有一个错误。VueStrap 中的进度条模板使用 classactive来制作动画，而在 Bootstrap 4 中我们必须使用 class progress-bar-animated。解决此问题的方法是创建您自己的使用 Bootstrap 4 的进度条组件。

自定义进度条组件可以写成：

Vue.component('c-progressbar', {
  template: `
    <div class="progress">
      <div class="progress-bar" :class="progressClasses"
          role="progressbar"  
          :style="progressStyle"></div>
    </div>`,
  props: {
    striped: Boolean,
    animated: Boolean,
    now: {
      type: Number,
      required: true
    },
    contextType: {
      type: String,
      default: 'primary'
    }
  },
  data: function() {
    let context = 'bg-' + this.contextType
    return {
      progressClasses: {
        'progress-bar-striped': this.striped,
        'progress-bar-animated': this.animated,
        [context]: true
      },
      progressStyle: {
        width: this.now + '%'
      }
    }
  }
})
new Vue({ el: '#app' })

您可以使用此笔进行测试：https ://codepen.io/abdullah-shabaz/pen/YzXdYgd