Toast Loading

Toast Loading for Vue3.

• English
• 简体中文
• Vue2
• React

Installation

$ npm i -save @toast-loadings/vue3

or

$ yarn add @toast-loadings/vue3

Quick Start

import { resetDefaultOptions, setDefaultOptions, hideLoading, showLoading } from '@toast-loadings/vue3';

// Reset global default options
resetDefaultOptions();

// Set global default options
setDefaultOptions({
  type: 'circular',
  duration: 10 * 1000,
  ...others
});

// Show Loading
showLoading('Loading...');

// Show Loading（with object）
showLoading({ position: 'bottom', message: 'Loading...' });

// Hide Loading
hideLoading();

Options

interface 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?: string;
  // Display position ('top', 'middle', 'bottom'), default is 'middle'
  position?: string;
  // Display duration, should be >= 0, default is 0
  duration?: number;
  // Whether to disable clicks on all elements during display
  forbidClick?: boolean;
  // Custom class name
  className?: string | object;
  // Custom z-index level. If not set, global auto-incrementing level(from 5000) will be used
  zIndex?: number;
  // Custom message
  message?: string;
  // Custom class name for message
  messageClassName?: string | object;
  // Custom style for message
  messageStyle?: string | object;
  // Whether to show loading icon, default is true
  showIcon?: boolean;
  // Custom color for loading icon
  iconColor?: string;
  // Custom size for loading icon
  iconSize?: string;
  // Custom class name for loading icon
  iconClassName?: string | object;
  // Custom style for loading icon
  iconStyle?: string | object;
}

Component usage

<template>
  <div>
    <ToastLoading position="bottom" message="Loading..."/>
    <Circular color="#333" size="40px"/>
    <Scale color="#444" size="40px"/>
    <Spinner color="#555" size="40px"/>
    <Spinner2 color="#666" size="40px"/>
  </div>
</template>
<script lang="ts">

import {
  Circular,
  Scale,
  Spinner,
  Spinner2,
  ToastLoading
} from '@toast-loadings/vue3';

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

Example project

A Vue3 + TS example project.

Project dir

$ cd example

Project setup

$ npm install

or

$ yarn install

Compiles and hot-reloads for development

$ npm run dev

or

$ yarn dev