Change width dynamically

[thor9n]

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!

[hunterliu1003]

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>

[thor9n]

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>

[hunterliu1003]

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

[hunterliu1003]

Thanks for you feedback.