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

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)

CodePudding user response：

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) :

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