In Vue.Js Component, How to Use Props in CSS

Vue.component('Child', {
  template: `
    <div class="">
      <button @click="logTop" class="foo" :style="cssProps">Log</button>
    </div>
  `,
  props: { top: Number, col: String },
  methods: {
    logTop() {
      console.log(this.top)
    }
  },
  computed: {
    cssProps() {
      return {
        '--top': `${this.top}%`,
        '--col': this.col
      }
    }
  }
})

new Vue({
  el: '#demo',
  data() {
    return {
      toggleChild: false,
      top: 0,
      col: ''
    }
  },
  methods: {
    startProcess() {
      this.toggleChild = !this.toggleChild;
      this.top = Math.random()*100;
      this.col = 'red'
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

.foo {
  position: absolute;
  top: var(--top);
  background-color: var(--col);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <button @click="startProcess">Start</button>
  <Child v-if="toggleChild" :top="top" :col="col" />
</div>

Vue.js Trying to use props in style

You seem to be confusing two things. v-icon has a prop called size whereas style is a Vue mechanism for setting custom CSS styles. Either could be used in this case. You cannot set a style of size, that's meaningless as size is not a CSS property.

I think what you want is this:

<v-icon :size="iconSize" >some-icon-name</v-icon>

That's using the size prop of v-icon rather than a custom style.

You could in theory do it using a style if you set the font-size. e.g.

style () {
    return 'font-size: ' + this.iconSize + 'px'
}

Or perhaps using an object instead:

style () {
    return {
       fontSize: this.iconSize + 'px'
    }
}

Create component with CSS class depending on props given

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>

Can I use props in computed property to bind a css class?

The object syntax of class bindings applies the key as the class name when the value is truthy. Since the computed prop return value includes { foo: true }, the "foo" class is applied.

To set the value of the foo prop as the class name, you can use this.foo as the key with brackets:

computed: {
  classObject: function () {
    return {
      [this.foo]: true,
      'text-danger': true
    }
  }
}

Class bindings also allow an array of strings and objects, so the computed prop could also be written as:

computed: {
  classObject: function () {
    return [
      this.foo,
      {
        'text-danger': true
      }
    ]
  }
}

...or just an array of strings:

computed: {
  classObject: function () {
    return [
      this.foo,
      'text-danger',
    ]
  }
}

demo

How to change component css with props with Nuxt Js Vue js

You can do it using the combination of props and computed

Subtitle Component

<template>
    <div>
       <h1 :style="getStyle">{{ title }}</h1>
    </div>
</template>
<script>
export default {
    name: 'subtitle',
    props: {
        stylings: Object,
    },
   computed: {
    getStyle() {
      return this.stylings;
    }
   }
}
</script>

Main Component

<template>
    <div class="container">
        <Subtitle :stylings="customStyle"></Subtitle>           
    </div>
</template>
export default {
    name: 'subtitle',
    data() {
        return {
          customStyle: {
              'font-weight': 'Bold',
      }
    }
}

VUE: How to use prop with CSS modules?

If you're passing app as prop to Row component, define a computed property to return the modules with the different classes:

<script>
  export default {
    name: "Row",
   props:['app'],
  computed:{
   modules(){
     return this.app.length? this.app.map(_class=>{
            return this.$module[_class];
      }):[];
    }
  },
    template: `
      <div :class="modules"><slot></slot></div>
    `
  }
  </script>

and pass it like :

<template>
  <div id="app">
    <row :app="['row-test', 'flex-center']">my row</row>
    <router-view />
  </div>
</template>

---

Related Topics