Estoy usando vue.js + vuetify, y tengo que colocar un botón sobre un componente de lienzo (aquí manejado por la biblioteca Konva)
Lo logré usando la posición absoluta del botón. Para limpiar las cosas, quiero colocar este botón en un componente dedicado.
Me gustaría pasar el CSS de posicionamiento en línea a este nuevo componente secundario, pero no sé cómo hacerlo funcionar.
He intentado las siguientes dos formas
Aquí está básicamente mi código:
<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>En resumen tengo las dos siguientes dudas:
Gracias por toda tu ayuda
El problema en este caso es básicamente lo que se supone que v-deep debe resolver en el mundo css (aunque no va a resolver su problema aquí)
No tiene un elemento native dentro del div konvaLayout , por lo que el estilo no llega al componente destinado.
En el componente MyButton.vue , tendría dos opciones para resolver esto:
style - //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> Utiliza un nombre de prop personalizado que se usa específicamente para diseñar el botón en 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 hay garantía ya que no se nos proporcionó un código y una caja o similar para verificar si funciona )