Início / coding / Perguntas / 78611129
Accepted
DigitalJedi
Asked: 2024-06-12 15:17:46 +0800 CST

Como usar o <v-dialog> do Vuetify com activator="parent" dentro de <v-icon>

  • 772

Já encontrei esse problema muitas vezes...

Sempre que colocar um <v-dialog>with activator="parent"em um <v-icon>componente - a caixa de diálogo não abre ao clicar no ícone.'

por exemplo:

<v-icon icon="mdi-check">
    <v-dialog activator="parent">
        WONT OPEN ON ICON CLICK
    </v-dialog>
</v-icon>

Por que não aciona o ativador como basicamente todos os outros componentes do vuetify? Existe uma solução rápida para isso sem adicionar manipuladores de cliques personalizados, etc.?

vuetify.js

1 respostas

  1. Best Answer

    A razão é que <VIcon>substituirá qualquer coisa no slot padrão pelo ícone e, portanto, <VDialog>o interior não estará mais lá.

    Ref: https://github.com/vuetifyjs/vuetify/blob/a30a85973d0f8f7b59ed30f7a147bbed8e0ba330/packages/vuetify/src/composables/icons.tsx#L104

    Você pode envolver o ícone com um botão, o que também é melhor em relação à UX (o botão do ícone tem efeito de passar o mouse e clicar)

    <template>
  <v-btn icon variant="text">
    <v-icon icon="mdi-check" />
    <v-dialog activator="parent"> WONT OPEN ON ICON CLICK </v-dialog>
  </v-btn>
</template>

    Parque infantil

    Ou o seguinte se você não quiser usar<VBtn>

    <template>
  <v-dialog>
    <template #activator="{ props }">
      <v-icon icon="mdi-check" v-bind="props" />
    </template>
    WONT OPEN ON ICON CLICK
  </v-dialog>
</template>
    • 1

relate perguntas