Vue - Passing inline css style to child component

2
votes

I am using vue.js + vuetify, and I have to position a button over a canvas component (here handled by the Konva library)

I managed it by using absolute positining of the button. To clean things up, I want to place this button in a dedicated component.

I would like to pass the positioning css inline to this new child component, but can't figure how to make it work.

I have tried the following two ways

  • Pass it with a :style="xxx" binding, like I did when using v-btn directly
  • Passing the positioning to a parent div : works with a div of width != 0 but seems like a kludge. And in this case z-index is not applied to the button.
  • I could pass the attributes with a dedicated prop, but vuetify does not seem to be needing it

Here is basically my code :

<template>
  <v-container fluid fill-height ref="parentLayout" class="pa-0" :style="{position: 'relative'}">
    <!-- Konva area overwhich the button will be placed drawn over /-->
    <div ref="konvaLayout" :style="{backgroundColor:'rgb( 40, 40, 40 )'}">
      <!-- THIS WORKS /-->
      <v-btn absolute :style="{top:'10%', left:'10%', width: '100px'}"> THIS WORKS </v-btn>
      <!-- THIS DOES NOT /-->
      <my-button :style="{position: absolute, top:'2%', left:'2%'}" />
  </v-container>
</template>

To sum up I have the two following questions:

  1. How can I properly bind :style to the child element, like vuetify does ?
  2. What is the standard way to pass css position attributes to child components ? With style binding like 1) ?

Thank you all for your help

1
javascriptvue.jsvuetify.js

1 Answers

1
votes

The Problem in this case is basically what v-deep is supposed to solve in the css world (whichs is not gonna solve your problem here though)

You don't have a native element inside the konvaLayout div so the style doesn't reach the destined component.

In the MyButton.vue component you'd have two options to solve this:

- style Props Overwrite -

//MyButton.vue
<template>
  <v-btn :style="style">{{ label }}</v-btn>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    label: String,
    style: [String, Object]
  }
});
</script>

- Custom Prop -

You use a custom prop-name that is specifically used to style the button in my-button (lol)

//MyButton.vue
<template>
  <v-btn :style="btnStyle">{{ label }}</v-btn>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    label: String,
    btnStyle: [String, Object]
  }
});
</script>

(No gurantee as we weren't provided a codesandbox or similar to verifying if its working)