toast-loading

Toast Loading

Toast Loading for Vue2.

• English
• 简体中文

Deprecated

The package has been deprecated. Please use another package: @toast-loadings/vue2.

Installation

$ npm i -save toast-loading

or

$ yarn add toast-loading

Quick Start

import { setDefaultOptions, hideLoading, showLoading } from 'toast-loading';

// set global default options
setDefaultOptions({
  type: 'circular',
  ...others
});

// show
showLoading();

// hide
hideLoading();

Options

const options = {
  // The loading icon type ('circular', 'scale', 'spinner', 'spinner2'), defaults is 'spinner', and can be customized via the slot icon when the component is invoked
  type: 'spinner',
  // Display position ('top', 'middle', 'bottom'), default is 'middle'
  position: 'middle',
  // Display duration, should be >= 0, default is 0
  duration: 0,
  // Whether to disable clicks on all elements during display
  forbidClick: false,
  // Custom class name
  className: '',
  // Custom message
  message: '',
  // Custom class name for message
  messageClassName: '',
  // Custom style for message
  messageStyle: {},
  // Whether to show loading icon, default is true
  showIcon: true,
  // Custom color for loading icon
  iconColor: '',
  // Custom size for loading icon
  iconSize: '',
  // Custom class name for loading icon
  iconClassName: '',
  // Custom style for loading icon
  iconStyle: {},
  // Custom z-index level. If not set, global auto-incrementing level(from 5000) will be used
  zIndex: 5000,
}

Component usage

<template>
  <div>
    <ToastLoading/>
    <Circular/>
    <Scale/>
    <Spinner/>
    <Spinner2/>
  </div>
</template>
<script>

import {
  Circular,
  Scale,
  Spinner,
  Spinner2,
  ToastLoading
} from 'toast-loading';

export default {
  components: {
    ToastLoading,
    Circular,
    Scale,
    Spinner,
    Spinner2,
  },
}
</script>

Example project

A Vue2 example project.

Project dir

$ cd example

Project setup

$ npm install

or

$ yarn install

Compiles and hot-reloads for development

$ npm run serve

or

$ yarn serve