Create component with CSS class depending on props given - css

Question

Is there a way in Vue.js to create a component that is containing CSS class scoped on which some values are given as parameters (props) before his creation.
Like:
<BeautifulBar :colorSelected="red" :colorDefault="blue", :animDuration="10.0s"></BeautifulBar
And in the component itself:
<template>
<div :class="'bar ' + (selected ? 'selected animated' : 'default')" #click="select()">The Bar</div>
</template>
<script>
export default{
data: function () { return { selected: false } },
props: {
colorSelected : {default: "orange", type: String},
colorDefault: {default: "orange", type: String},
animDuration: {default: "4.0s", type: String},
},
method: {
select: function() { this.selected = !this.selected;}
}
}
</script>
/* HERE */
<style scoped>
selected: {
color: red,
background-color: var(this.colorSelected)
}
default: {
color: black,
background-color: var(this.colorDefault)
}
animate:{
-webkit-transition: var(animDuration) !important;
-moz-transition: var() !important;
-o-transition: var() !important;
transition: var() !important;
}
</style>

Answer 1

Have you tried using computed function for class?
computed:{
classObject:function(){
return {
'selected': this.selected,
'animated': this.selected,
'default': !this.selected
}
}
}
then
<div :class="classObject">
your template
</div>

Answer 2

I succeed doing it like this (showing a progress bar looping animation, you can pass the animation time as props):
<template>
<div class="progress" :style="`height: ${height}rem;`">
<div
:class="'progress-bar bg-success ' + 'progressAnimation'"
role="progressbar"
:style="`width: ${progressValue}%; --animationDuration: ${animationDurationStr};`"
:aria-valuenow="`${progressValue}`"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</template>
<script scoped>
import config from "../config";
export default {
props: {
animationDuration: { type: Number, default: 140 },
height: { type: Number, default: 0.25 }
},
created: function() {
config.log("------------ AutoLoopProgressBar -----------");
config.log(
"autoloopprogressbar",
"Set animation duration to " + this.animationDurationStr
);
},
mounted: function() {
config.log("autoloopprogressbar", "Setup timer");
setInterval(() => {
this.reset();
}, this.animationDuration * 1000);
this.reset();
},
data: function() {
return {
progressValue: 0
};
},
computed: {
animationDurationStr: function() {
return this.animationDuration + ".0s";
}
},
methods: {
reset: function() {
let tmp = this.animationDuration;
this.animationDuration = 0;
this.progressValue = 0;
setTimeout(() => {
this.animationDuration = tmp;
this.progressValue = 100;
}, 0);
}
}
};
</script>
<style scoped>
.progressAnimation {
--animationDuration: 1s;
-webkit-transition: var(--animationDuration) linear !important;
-moz-transition: var(--animationDuration) linear !important;
-o-transition: var(--animationDuration) linear !important;
transition: var(--animationDuration) linear !important;
}
</style>