Example of how to wrap Bootstrap using Vue components.
Imperative progress-bar:
var app = new Vue({
el : "#app",
template : html,
data : {
title : "Bootstrap Vue Component Demo",
progress : {
minimum : 0,
maximum : 100,
value : 0
}
},
ready : function() {
this.$on("change", function() {
this.text = this.percentComplete + "%";
});
this.$on("complete", function() {
this.text = "Complete";
});
var interval = setInterval(function() {
if (this.progress.value < 100) {
this.progress.value = this.progress.value + 1;
}
else {
clearInterval(interval);
}
}.bind(this), 100);
}
});
<bvc-progress-bar v-with="progress"></bvc-progress-bar>
Imperative progress-bar
var progressBar = new BVCProgressBar({
el : "#progress",
data : {
minimum : 0,
maximum : 100,
value : 0
},
ready : function() {
this.$on("change", function() {
this.text = this.percentComplete + "%";
});
this.$on("complete", function() {
this.text = "Complete";
});
var interval = setInterval(function() {
if (this.value < 100) {
this.value = this.value + 1;
}
else {
clearInterval(interval);
}
}.bind(this), 100);
}
});
<div id="progress"></div>