| 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 | } | |
