initbase/vue-modal-2

A simple and lightweight Vue modal component for Vue 2.x.

Docs: https://initbase..io/vue-modal-2/

demo codesandbox

yarn add @burhanahmeed/vue-modal-2

or

npm install @burhanahmeed/vue-modal-2

Vue-modal-2 usage for Vue 2.x

import Vue from "vue";
import App from "./App.vue";

import Modal from "@burhanahmeed/vue-modal-2";

Vue.use(Modal);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

Usage in vue. If you didn't specify options.componentName, by default it will be <vue-modal-2></vue-modal-2>

<template>
  <vue-modal-2 name="modal-1" @on-close="close">
    Hello From Inside Modal Component
  </vue-modal-2>
</template>

API usage

methods: {
  open () {
    this.$vm2.open('modal-1')
  },
  close () {
    this.$vm2.close('modal-1')
  }
}

vue-modal-2 also accept options in .use() function as second argument.

• type: String
• default: vue-modal-2

Vue.use(Modal. {
  componentName: 'MyModal'
});

<template>
  <my-modal name="modal-1" @on-close="close">
    Hello From Inside Modal Component
  </my-modal>
</template>

vue-modal-2 accept some props

unique name of the modal (required).

• type: String
• required: true
• default: modal-1

props function using to close the modal (required).

• type: function
• required: true

see example above.

options props for vue-modal-2 header

• type: Object
• default: {}

headerOptions key:

options props for vue-modal-2 footer

• type: Object
• default: {}

footerOptions key:

used to remove footer

• type: Boolean
• default: false

Used to remove header

• type: Boolean
• default: false

Background color of modal wrapper (backdrop) (default is dark)

• type: String
• default: rgba(0, 0, 0, 0.5)

Used to switch color mode

• type: Boolean
• default: false

background color of modal dialog when mode is light

• type: String
• default: white

background color of modal dialog when mode is dark

• type: String
• default: #06090f

text color of modal when mode is dark

• type: String
• default: white

text color of modal when mode is light

• type: String
• default: black

size of modal dialog

• type: String
• value: md | lg | xl | full-w | full-hw | sidebar-l | sidebar-r

accept modal name as args

accept modal name as args

Feel free to open an issue or pull request. Open an issue if you want discussing something.

More logs

• Add more modalSize options -> [sidebar-r, sidebar-l]
• Add little A11y

• Add props modalSize with value [md, lg, xl, full-w, full-hw]
• fix reponsiveness problems
• fix body overflow not automatically being scrollable

MIT © burhanahmeed and Initbase