euvl / vue-js-modal

Easy to use, highly customizable Vue.js modal library.
http://vue-js-modal.yev.io
MIT License
4.35k stars 592 forks source link

Added support for slots in dynamic modal - Fixes #400 #734

Closed kaguya3222 closed 2 years ago

kaguya3222 commented 2 years ago

Made it possible to pass slots to dynamic modals.

For example, we have a modal component - ExampleModal

If we want to call it dynamically, we'll do something like:

this.$modal.show(ExampleModal)

But if ExampleModal has slots, for example:

<template>
  <div>
    <slot />
  </div>
</template>

We can pass slots like this:

this.$modal.show(ExampleModal, {}, {
  default: this.$createElement('span', 'message')
})

If we have scoped slots, for example:

<template>
  <div>
    <slot name="test" :number="42" />
  </div>
</template>

We can pass them like:

this.$modal.show(ExampleModal, {}, {
 test: scope => this.$createElement('span', `Number: ${scope.number}`)
})
sonarcloud[bot] commented 2 years ago

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

euvl commented 2 years ago

Hey, this looks very clean, well done!

I am looking for maintainers for this project who are actively using Vue (i have not used it much in recent years) If you are interested to help me out - please ping me at yev.dev@gmail.com

mooncastlestone commented 2 years ago

Is this working now? I tried it a few times, but it's not working properly..