Question

我的工具提示不适用于我的自定义组件。我将对话框包装在组件中，并想添加一个工具提示。

我的Vue.js版本为var text = "aaaaaaa↵bbbbbb↵cccccc" let result = text.split("↵").join("\n"); console.log(result);和Vuetify 2.5.17

组件A：

2.1.15

组件B：

<v-tooltip bottom>
   <template v-slot:activator="{ on }" v-slot:item={item}>
      <ComponentB v-on="on">
      </ComponentB>
   </template>
   <span>Hello world!</span>
</v-tooltip>

我是VueJs的初学者，所以有人可以帮助我：）

Answer 1

我个人只是将工具提示移到子组件中，因为从技术上来讲，它是子组件的一部分。鉴于您在问题中提供的代码量有限，我尽力做到了以下示例代码。希望这会有所帮助！

<!-- Component A (Parent) -->
<template>
   <ComponentB :item="item" />
</template>

<!-- Component B (Child) -->
<template>
   <v-dialog v-model="dialog" persistent max-width="800px">
      <v-tooltip bottom>
         <template v-slot:activator="{ on }" v-slot:item="item">
            <v-icon small v-on="on">
               add_comment
            </v-icon>
         </template>
         <span>Hello world!</span>
      </v-tooltip>
      <v-card>
         <v-card-title>
            <span class="headline">Title</span>
            <v-spacer></v-spacer>
            <v-btn icon @click="dialog = false">
               <v-icon>mdi-close</v-icon>
            </v-btn>
         </v-card-title>
         <v-card-text class="pb-0">
            Hello world!
         </v-card-text>
         <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
            color="primary"
            text
            @click="dialog = false"
          >
            I accept
          </v-btn>
         </v-card-actions>
      </v-card>
   </v-dialog>
</template>

<script>
  export default {
    props: {
      item: {
        type: Object,
        default() {
          return {};
        }
      }
    }
  };
</script>

Vuetify：工具提示不适用于自定义组件

1 个答案: