Vue - 将内联 css 样式传递给子组件

Question

我正在使用 vue.js + vuetify，我必须在 canvas 组件上放置一个按钮（此处由 Konva 库处理）

我通过使用按钮的绝对定位来管理它。为了清理干净，我想将此按钮放在专用组件中。

我想将定位 css 内联传递给这个新的子组件，但不知道如何让它工作。

以下两种方式我都试过了

使用 :style="xxx" 绑定传递它，就像我直接使用 v-btn 时所做的那样
将定位传递给父级 div ：适用于宽度为 != 0 的 div，但看起来很杂乱。在这种情况下，z-index 未应用于按钮。
我可以使用专用道具传递属性，但 vuetify 似乎不需要它

这基本上是我的代码：

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

总结起来我有以下两个问题：

如何像 vuetify 那样正确地将 :style 绑定到子元素？
将 css 位置属性传递给子组件的标准方法是什么？像 1) 这样的样式绑定 ?

谢谢大家的帮助

Answer 1

这种情况下的问题基本上是 v-deep 应该在 css 世界中解决的问题（虽然这不会解决你的问题）

konvaLayout div 中没有 native 元素，因此样式未到达目标组件。

在 MyButton.vue 组件中，您有两个选项可以解决此问题：

- `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>

- 自定义道具 -

您使用了自定义属性名称，专门用于在 my-button 中设置按钮样式（笑）

//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>

（没有保证，因为我们没有提供代码盒或类似的东西来验证它是否有效）

Vue - 将内联 css 样式传递给子组件

Vue - Passing inline css style to child component

javascript

vue.js

vuetify.js

- `style` 道具覆盖 -

- 自定义道具 -

Vue - 将内联 css 样式传递给子组件

Vue - Passing inline css style to child component

javascript

vue.js

vuetify.js

- style 道具覆盖 -

- 自定义道具 -

- `style` 道具覆盖 -