Toast Loading for Vue2.
The package has been deprecated. Please use another package: @toast-loadings/vue2.
$ npm i -save toast-loading
or
$ yarn add toast-loading
import { setDefaultOptions, hideLoading, showLoading } from 'toast-loading';
// set global default options
setDefaultOptions({
type: 'circular',
...others
});
// show
showLoading();
// hide
hideLoading();
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,
}
<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>
A Vue2 example project.
$ cd example
$ npm install
or
$ yarn install
$ npm run serve
or
$ yarn serve