123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- import { Spin } from 'ant-design-vue'
- export const PageLoading = {
- name: 'PageLoading',
- props: {
- tip: {
- type: String,
- default: 'Loading..'
- },
- size: {
- type: String,
- default: 'large'
- }
- },
- render () {
- const style = {
- textAlign: 'center',
- background: 'rgba(0,0,0,0.6)',
- position: 'fixed',
- top: 0,
- bottom: 0,
- left: 0,
- right: 0,
- zIndex: 1100
- }
- const spinStyle = {
- position: 'absolute',
- left: '50%',
- top: '40%',
- transform: 'translate(-50%, -50%)'
- }
- return (<div style={style}>
- <Spin size={this.size} style={spinStyle} tip={this.tip} />
- </div>)
- }
- }
- const version = '0.0.1'
- const loading = {}
- loading.newInstance = (Vue, options) => {
- let loadingElement = document.querySelector('body>div[type=loading]')
- if (!loadingElement) {
- loadingElement = document.createElement('div')
- loadingElement.setAttribute('type', 'loading')
- loadingElement.setAttribute('class', 'ant-loading-wrapper')
- document.body.appendChild(loadingElement)
- }
- const cdProps = Object.assign({ visible: false, size: 'large', tip: 'Loading...' }, options)
- const instance = new Vue({
- data () {
- return {
- ...cdProps
- }
- },
- render () {
- const { tip } = this
- const props = {}
- this.tip && (props.tip = tip)
- if (this.visible) {
- return <PageLoading { ...{ props } } />
- }
- return null
- }
- }).$mount(loadingElement)
- function update (config) {
- const { visible, size, tip } = { ...cdProps, ...config }
- instance.$set(instance, 'visible', visible)
- if (tip) {
- instance.$set(instance, 'tip', tip)
- }
- if (size) {
- instance.$set(instance, 'size', size)
- }
- }
- return {
- instance,
- update
- }
- }
- const api = {
- show: function (options) {
- this.instance.update({ ...options, visible: true })
- },
- hide: function () {
- this.instance.update({ visible: false })
- }
- }
- const install = function (Vue, options) {
- if (Vue.prototype.$loading) {
- return
- }
- api.instance = loading.newInstance(Vue, options)
- Vue.prototype.$loading = api
- }
- export default {
- version,
- install
- }
|