Toast Loading
Toast Loading for Vue2.
Installation
$ npm i -save @toast-loadings/vue2
or
$ yarn add @toast-loadings/vue2
Quick Start
import { resetDefaultOptions, setDefaultOptions, hideLoading, showLoading } from '@toast-loadings/vue2';
// reset global current 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
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 z-index level. If not set, global auto-incrementing level(from 5000) will be used
zIndex: 5000,
// 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: {},
}
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>
import {
Circular,
Scale,
Spinner,
Spinner2,
ToastLoading
} from '@toast-loadings/vue2';
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