index.jsx 2.2 KB

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