vue-rmodal

A simple 1.2 KB modal dialog with no external dependencies

rmodal.js

Installation

yarn add vue-rmodal rmodal

import VueRmodal from 'vue-rmodal'
import RModal from 'rmodal'

Vue.use(VueRmodal, RModal)

Usage

<!-- use bootstrap AND animate.css -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/animate.css" type="text/css" />

<!-- just write child html in component -->
<div>
  <a @click="$rmodal.ModalName.open()" id="showModal" class="btn btn-success">Show modal</a>

  <vue-rmodal name="ModalName" :setting="setting">
    <!-- write modal here -->
    <div class="modal-dialog animated">
      <div class="modal-content">
        <form class="form-horizontal" method="get">
          <div class="modal-header">
            <strong>Yep, I'm a dialog...</strong>
          </div>

          <div class="modal-body">
            <div class="form-group">
              <label for="dummyText" class="control-label col-xs-4">Dummy text</label>
              <div class="input-group col-xs-7">
                <input type="text" name="dummyText" id="dummyText" class="form-control" />
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <button class="btn btn-default" type="button" @click="$rmodal['ModalName'].close();">Cancel</button>
            <button class="btn btn-primary" type="submit" @click="$rmodal['ModalName'].close();">Save</button>
          </div>
        </form>
      </div>
    </div>
  </vue-rmodal>

</div>

Props

| Name | Type | Default | Description | | :------ | :----- | :------ | :------------------------------------------------ | | name | String | '' | specify name modal to use. | | setting | Object | {} | docs setting is options |

For detailed explanation on how things work, consult the docs for vue-loader.