vue-final / vue-final-modal

🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
https://vue-final-modal.org
MIT License
903 stars 97 forks source link

feat: `useModal()` slots allow passing components directly #304

Closed Mini-ghost closed 1 year ago

Mini-ghost commented 1 year ago

In current, useModal usage like following code:

<script setup lang="ts">
import { markRaw } from 'vue'
import { VueFinalModal, useModal } from 'vue-final-modal'

const modalInstance = useModal({
  component: markRaw(VueFinalModal),
  slots: {
    // pass a html string
    default: '<p>The content of the modal</p>',

    // pass a object include `component` and optional `attrs`
    default: {
      component: markRaw(CustomComponent),
      attrs: {
        // <CustomComponent />'s  props
      }
    }
  }
})
</script>

This PR improves two features:

  1. Users no longer need to use markRaw to wrapper component.
  2. slots allow passing slot name and components directly.

The following code is new usage after this PR

<script setup lang="ts">
import { markRaw } from 'vue'
import { VueFinalModal, useModal } from 'vue-final-modal'

const modalInstance = useModal({
  component: VueFinalModal,
  slots: {
    // pass a html string
    default: '<p>The content of the modal</p>',

    // pass a object include `component` and optional `attrs`
    default: {
      component: CustomComponent,
      attrs: {
        // <CustomComponent />'s  props
      }
    },

    // pass a component directly
    default: CustomComponent,
  }
})
</script>