Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript![ ? ]
And how do you make modal windows on Vue.js? - bug-code.com Q&A

And how do you make modal windows on Vue.js?

0 like 0 dislike
40 views

Which components and plug-ins to create modal windows do you find most successful?
Tried a few pieces, was disappointed and decided to ask more experienced friends.

Now I use vue-js-modal, but his destructive desire to set a rigid size and position for the container, as well as the inability to use custom eventors is very frustrating.

I expect three basic things from the plugin:
1. The ability to display components;
2. communication with the parent through props and event;
3. Ability to disable preset styles.

I liked how v-tooltip (v-popover component) works and I would like to find an analogue.

example of code

<v-popover
  offset="16"
>
  <!-- This will be the popover target (for the events and position) -->
  <button class="tooltip-target b3">Click me</button>

  <!-- This will be the content of the popover -->
  <template slot="popover">
    <input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
    <p>
      {{ msg }}
    </p>

    <!-- You can put other components too -->
    <ExampleComponent char="=" />
  </template>
</v-popover>
asked by (1.3k points) | 40 views

1 Answer

0 like 0 dislike

A long time ago I came to the conclusion that it's better to make dynamic modulators, i.e. just register any component and shove it into DOM.

component itself

export default {
  name: 'modal-hello',
};


App.vue

<modal-root>
  this is where the mods will be rendered.
</modal-root>

and just open it somewhere

mounted() {
  this.$modal.open('modal-hello');
}

this way all modals will be at body level, and will not clog the browser if they are not called, especially if they have a lot of components, not just ok/no.

answered by (700 points)
Welcome to Bug-code Q&A, where you can ask questions and receive answers from other members of the community.

24.8k questions

46.2k answers

0 comments

12.7k users

24,788 questions
46,220 answers
0 comments
12,718 users