Thanks for the article, Jakz!
Thanks for the article, Jakz!

I have a few questions

1. You set the component name in the script section. What’s the purpose of it? Can you explain how do you want to use it?

2. What default behavior did you prevent on close-button?

3. Script tags don’t support curly brackets, can you reformulate this part? It’s confusing a bit.

Template tags {{ value }} Script Tags {{ this.value }}

4. Why do you use `v-show` not `v-if` for visibility control?

Some comments about the code:

I think that more sematic way it to define buttons as `<button>`, not `<a href=”#”>` You are using BEM naming for classes so you can define button modifiers in a BEM naming way like `class=”btn btn- -gmaps”` You can set Boolean type for the value you expect to get. ( You’re working with Booleans here, right? ).

value: {

type: Boolean,

default: false,

},

4. You have open and close methods, but they work in a toggle way. This mismatch ( name of function !== what function does ) may cause problems in the future.

And some notes about behavior:

It’s a nice idea to add some hook for your component. E.g. you can add onClose event

methods: {

onClose() {

this.$emit('input', false);

this.$emit('close');

},

},

2. You can close modal by clicking on the overlay. ( In this case you can play with class naming, e.g. add modal__overlay and modal__content / modal__wrapper )

3. It would be cool if you add transition here
['Tommy Toomean']
['JavaScript', 'Vuejs', 'Vue']