CODEWITHSUNDEEP
vue.js
Maxim
Maxim

Reputation: 447

How to apply a body {} style to specific vue component

I'm using scoped style for most of my components to not interfere with other components. Some of my views/components need body { overflow: hidden; }, but others don't. I can't use

<style scoped>
body {
  overflow: hidden;
}
...
</style>

How can i apply this style when specific components are loaded? (i am using vue router if that helps)

Upvotes: 1

Views: 2853

Answers (1)

gguney
gguney

Reputation: 2643

You may send a prop to your component like described in here: https://v2.vuejs.org/v2/guide/components-props.html

Let's call you prop isOverflowHidden, and create .hidden class in your css.

After that, you can add your wrapper element (first tag in component) :class="{ hidden: isOverflowHidden }"

Or you can move it to a method.

If you want you can use this this action for inline-styling.

<div :style="{ overflow: (isOverflowHidden ? 'hidden' : '')}"></div>

You can read extended information in here: https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles

Upvotes: 2

Related Questions