0.1.3 • Published 2 years ago
toast-loading v0.1.3
Toast Loading
Toast Loading for Vue2.
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