inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 import { Spin } from 'ant-design-vue'
I 2
3 export const PageLoading = {
4   name: 'PageLoading',
5   props: {
6     tip: {
7       type: String,
8       default: 'Loading..'
9     },
10     size: {
11       type: String,
12       default: 'large'
13     }
14   },
15   render () {
16     const style = {
17       textAlign: 'center',
18       background: 'rgba(0,0,0,0.6)',
19       position: 'fixed',
20       top: 0,
21       bottom: 0,
22       left: 0,
23       right: 0,
24       zIndex: 1100
25     }
26     const spinStyle = {
27       position: 'absolute',
28       left: '50%',
29       top: '40%',
30       transform: 'translate(-50%, -50%)'
31     }
32     return (<div style={style}>
33       <Spin size={this.size} style={spinStyle} tip={this.tip} />
34     </div>)
35   }
36 }
37
38 const version = '0.0.1'
39 const loading = {}
40
41 loading.newInstance = (Vue, options) => {
42   let loadingElement = document.querySelector('body>div[type=loading]')
43   if (!loadingElement) {
44     loadingElement = document.createElement('div')
45     loadingElement.setAttribute('type', 'loading')
46     loadingElement.setAttribute('class', 'ant-loading-wrapper')
47     document.body.appendChild(loadingElement)
48   }
49
50   const cdProps = Object.assign({ visible: false, size: 'large', tip: 'Loading...' }, options)
51
52   const instance = new Vue({
53     data () {
54       return {
55         ...cdProps
56       }
57     },
58     render () {
59       const { tip } = this
60       const props = {}
61       this.tip && (props.tip = tip)
62       if (this.visible) {
63         return <PageLoading { ...{ props } } />
64       }
65       return null
66     }
67   }).$mount(loadingElement)
68
69   function update (config) {
70     const { visible, size, tip } = { ...cdProps, ...config }
71     instance.$set(instance, 'visible', visible)
72     if (tip) {
73       instance.$set(instance, 'tip', tip)
74     }
75     if (size) {
76       instance.$set(instance, 'size', size)
77     }
78   }
79
80   return {
81     instance,
82     update
83   }
84 }
85
86 const api = {
87   show: function (options) {
88     this.instance.update({ ...options, visible: true })
89   },
90   hide: function () {
91     this.instance.update({ visible: false })
92   }
93 }
94
95 const install = function (Vue, options) {
96   if (Vue.prototype.$loading) {
97     return
98   }
99   api.instance = loading.newInstance(Vue, options)
100   Vue.prototype.$loading = api
101 }
102
103 export default {
104   version,
105   install
106 }