vue-slim-modal

vue-slim-modal

Features

• Functional component
• Minimal design
• Light-weight, 1KB and that's all!

Install

yarn add vue-slim-modal

CDN: UNPKG | jsDelivr

Usage

<template>
  <div id="example">
    <button @click="toggle">Toggle Modal</button>
    <modal :is-open="isOpen">
      <h2>title></h2>
      <p>text goes here...</p>
    </modal>
  </div>
</template>

<script>
import Modal from 'vue-slim-modal'

export default {
  components: { Modal },
  data() {
    return { 
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

<!-- Optionally use our default style -->
<style src="vue-slim-modal/themes/default.css"></style>

Vist https://egoistian.com/vue-slim-modal (source code) for an online demo.

Props

<Modal>

Add attributes excepts below props will go to .modal element, eg: <Modal class="foo" /> results in:

<div class="modal-overlay">
  <div class="foo modal">
  </div>
</div>

isOpen

Type: boolean Default: false

isCenter

Type: boolean Default: false

Position the modal at absolute center, by default it's 100px from the top.

clickOutside

Type: function Default: noop

The function to invoke as user clicks outside the modal.

overlayClass

Type: string Default: undefined

Add extra class name to .modal-overlay element.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Development

Run the example with Poi:

cd vue-slim-modal
yarn
yarn dev

License

MIT © EGOIST