-
Notifications
You must be signed in to change notification settings - Fork 101
-
First off, thanks for a great component — it's really well done!
I've placed a <modal></modal> in the root of my app that I call from individual components using $vfm.show().
I'm trying to set the modal width dynamically by passing params as following:
$vfm.show('modal', {
component: PrivacyPolicy,
width: '1200'
})
...but I can't make it work since params only are available in the scoped-slot, and I would like to have it available as a computed property for style bindings.
What's the way to go forward if I want to be able to pass width as an argument with a default value set in the modal component?
Thanks in advance!
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 3 comments 1 reply
-
Hi @thor9n ,
How about using another way like:
$vfm.show('modal', { component: PrivacyPolicy, bind: { width: '1200' } })
and adding width prop to PrivacyPolicy component like:
<template> <vue-final-modal> ... </vue-final-modal> </template> <script> export default { props: { width: { // ... } } } </script>
Beta Was this translation helpful? Give feedback.
All reactions
-
Hi @hunterliu1003, thanks for getting back to me! I marked your answer as the solution at first glance, but then I realised it's not working for me.
Your solution works well when sending properties to the component scope, but to set width I want to pass properties to the modal scope (<div class="modal-content"></div>).
This is the code of Modal.vue:
<template> <vue-final-modal v-slot="{ params, close }" v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners" name="modal" > <div class="modal__content"> <component :is="params.component" v-bind="params.bind" /> </div> <div class="modal__action"></div> </vue-final-modal> </template>
Beta Was this translation helpful? Give feedback.
All reactions
-
btw, Although there is a feature params, but I don’t think it is a good practice
I think the best practice is binding props to the component
Beta Was this translation helpful? Give feedback.
All reactions
-
Thanks for you feedback.
Beta Was this translation helpful? Give feedback.