Question

我尝试像在文档中那样做 https://vuetifyjs.com/en/components/tooltips/

<v-tooltip color="black" bottom >
        <template v-slot:activator="{ on, attrs }">
          <v-switch
            v-model="boo"
            v-bind="attrs"
            v-on="on"
            inset
          >
          </v-switch>
        </template>
        <div>
          Tooltip
        </div>
      </v-tooltip>

在这里： https://codepen.io/julienreszka/pen/BazvmYN 但是没有显示工具提示，并且CSS错误。

Answer 1

不是很性感，但是您可以将div包裹起来

<div 
  v-on="on"
  v-bind="attrs">
    <v-switch
      v-model="boo"
    ></v-switch>
</div>

Answer 2

v-tooltip 是 v-switch

的标签

<v-switch
  v-model="boo"
  inset>
  <template v-slot:label>
    <v-tooltip color="black" bottom>
      <template v-slot:activator="{ on, attrs }">
        <span
          v-bind="attrs"
          v-on="on">switch label</span>
      </template>
      Tooltip
    </v-tooltip>
  </template>
</v-switch>

switches document

如何在Vuetify中使用v-tooltip包装v-switch？

2 个答案: