🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

simple-modal-vue

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

simple-modal-vue

Build an extremely easy modal component in Vuejs

1.0.12
latest
Source
npm
Version published
Weekly downloads
197
3.68%
Maintainers
1
Weekly downloads
 
Created
Source

Simple Modal Vue

Very light and simple modal component for Vue

NPM

  • Very light and simple modal component for Vue

  • No dependency required

  • No external CSS library required

  • Fully support on IE10, IE11, Edge, Firefox, Safari, Ipad Safari and Chrome of course

  • Fix scroll on Ipad

Install

npm install simple-modal-vue --save
yarn add simple-modal-vue --save

Usage

Usage in example

<template>
  <div>
    <simple-modal v-model="isShow" title="Modal Header">
      <template slot="body">
        <h2>My modal</h2>
        <input>
        <p>Hello you</p>
      </template>
      <template slot="footer">
        <button>OK</button>
      </template>
    </simple-modal>
    <button @click="isShow = !isShow">on off button</button>
  </div>
</template>

<script>
import SimpleModal from 'simple-modal-vue'
export default {
  name: 'SimpleModalExample',
  components: { SimpleModal },
  data() {
    return { isShow: false }
  },
}
</script>

Props and methods

NameRequiredTypeDefaultDescription
titlefalseStringName of the modal
hasButtonClosefalseBooleanfalseIf true allows showing the button close on the modal
hasFooterfalseBooleanfalseIf true allows showing the footer of the modal
sizefalseString ['responsive', 'small', 'big' ]'responsive'If true allows resizing depend on config the modal window.

Events

NameDescription
onOpenEmits when modal is opened
onCloseEmits when modal is closed

Vesion

  • 1.0.9 Fix some minor issues
  • 1.0.5 Add unit test coverage 100%
  • 1.0.1 Publish release

Keywords

front-end

FAQs

Package last updated on 18 Dec 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts