https://github.com/arfedulov/vue2-modal

An easy to style vue component for creating modal windows.
https://github.com/arfedulov/vue2-modal

dialog modal vue vue2

Last synced: 2 days ago
JSON representation

An easy to style vue component for creating modal windows.

• Host: GitHub
• URL: https://github.com/arfedulov/vue2-modal
• Owner: arfedulov
• Created: 2021-09-11T13:58:43.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-03-16T07:49:20.000Z (over 2 years ago)
• Last Synced: 2024-09-19T07:10:05.516Z (15 days ago)
• Topics: dialog, modal, vue, vue2
• Language: Vue
• Homepage:
• Size: 1.04 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue2-modal

This is a vue component for creating your modal windows. It is

designed to be highly customizable in its appearance, so it goes

almost without any styling. It is a responsibility of a user of this

package to provide css for your component.

So what is the responsibility of this package then? It provides

the core functionality of modal windows, like the following:

- opens over the main document;

- disables the access to main document (navigation, scrolling etc.);

- has a backdrop which may obscure the underlying page content (for

  focusing user attention on the modal content);

- allows receiving yes/no response from a user;

- built with accessibility in mind;

[See an example](https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html)

## some examples

In your _main.js_ file:

```js

import Vue2Modal from "@arfedulov/vue2-modal";

Vue.use(Vue2Modal);

```

In your application root:

```html

  


    

    

  


```

In multiple components of your application you may

have something like this:

```html

  


    open


    

      


        Agree?


        cancel

        ok

      

    

  


```

```js

export default {

  methods: {

    async openMyModal() {

      const result = await this.$refs.myModal.open();

      console.log(result); // `true` or `false`

    },

  },

};

```

## API

### v-modal properties

- `target` - the name of the modal's target

- `close-on-backdrop-click`

- `backdrop-styles` - an object of styles which is forwarded to backdrop element

- `transition-name` - optional name of vue  which is applied to the modal

### direcitves

- `v-modal-submit` - mark a submit button

- `v-modal-cancel` - mark a cancel button