Hello ! I would like to customize my card actions, but the slot override seems not wor

Same problem with different implementation : <div class="highlight highlight-sourc

Custom card actions props about vuetify-use-dialog HOT 2 CLOSED

ThomasLeconte commented on May 28, 2024

Custom card actions props

from vuetify-use-dialog.

Comments (2)

wobsoriano commented on May 28, 2024 1

Added a new prop that will allow the use of custom VCardActions content component:

import YourComponent from './YourComponent.vue'

createConfirm({
 ...rest,
 actionsContentComponent: YourComponent
})

<script setup>
defineProps(['confirm', 'cancel', 'confirmationButtonDisabled'])
</script>

<template>
  <VBtn @click="cancel">
    Cancel
  </VBtn>
  <VBtn color="primary" :disabled="confirmationButtonDisabled" @click="confirm">
    Close
  </VBtn>
</template>

from vuetify-use-dialog.

ThomasLeconte commented on May 28, 2024

Same problem with different implementation :

this.confirm({
  title: 'My title',
  content: "My content",
  cardActionsProps: {"v-slots": {default: () => h('div', {innerHTML: 'Hello'}, [] ) }}
})

Not mentionned before, but this.confirm is just a shortcut of your recommanded implementation :

//dialog.ts
export function setupDialogs() {
  const createSnackbar = useSnackbar()
  const createConfirm = useConfirm()
  const show = (options: SnackbarOptions) => createSnackbar(options)
  const confirm = (options: ConfirmDialogOptions) => createConfirm({ ...options, cardProps: { width: '30vw' }})

  return { show, confirm }
}


//MyComponent.vue
export default defineComponent({
  ...,
  setup() {
    return setupDialogs();
  }
})