Package Exports

vue-swal2-loading-overlay

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-swal2-loading-overlay) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Sweet Alert 2 Loading Overlay

Vue.js plugin to easily add loading overlays (extends vue-sweetalert2)

Installation

# npm
npm install vue-swal2-loading-overlay --save

# Yarn
yarn add vue-swal2-loading-overlay

Usage

Install the plugin (for exemple, in your main.js file)

//You need to have 'vue-sweetalert2' installed for 'vue-swal2-loading-overlay' to work

import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';
import LoadingOverlay from 'vue-swal2-loading-overlay';

Vue.use(VueSweetalert2);
Vue.use(LoadingOverlay);

new Vue({
  el: '#app'
});

Profit! Wherever you could call this.$swal({}) you can also call this.$loading.show(). Example:

<template>
  <h4>I wanna hide this content until I finish loading something</h4>
</template>

<script>
  export default {
      mounted(){
          this.$loading.show({ background: 'black', color: '#00FF00' });
      }
  }
</script>

API methods

`this.$loading.show(opts)`

Shows the loading indicator. You can specify the following properties by passing the opts object parameter:

Property	Result	Defaults
`background`	Changes the overlay background color	`'white'`
`color`	Changes the loading indicator color	`'#3085d6'`
`animation`	If set to false, 'show' and 'hide' animations will be disabled	`true`

You can also omit the opts parameter and it will use the defaults.

`this.$loading.hide()`

Hides the loading indicator.

Browser support

Modern browsers with support to ES6.

sweetalert2/sweetalert2 - Sweet Alert 2
avil13/vue-sweetalert2 - Vue.js wrapper

License

Licensed under MIT.

vue-swal2-loading-overlay