You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
7.6 KiB
1 line
7.6 KiB
11 months ago
|
{"version":3,"file":"loading.mjs","sources":["../../../../../../packages/components/loading/src/loading.ts"],"sourcesContent":["import {\n createApp,\n h,\n reactive,\n ref,\n createVNode,\n toRefs,\n Transition,\n vShow,\n withCtx,\n withDirectives,\n} from 'vue'\nimport { removeClass } from '@element-plus/utils/dom'\n\nimport type { LoadingOptionsResolved } from './types'\n\nexport function createLoadingComponent(options: LoadingOptionsResolved) {\n let afterLeaveTimer: number\n\n const afterLeaveFlag = ref(false)\n const data = reactive({\n ...options,\n originalPosition: '',\n originalOverflow: '',\n visible: false,\n })\n\n function setText(text: string) {\n data.text = text\n }\n\n function destroySelf() {\n const target = data.parent\n if (!target.vLoadingAddClassList) {\n let loadingNumber: number | string | null =\n target.getAttribute('loading-number')\n loadingNumber = Number.parseInt(loadingNumber as any) - 1\n if (!loadingNumber) {\n removeClass(target, 'el-loading-parent--relative')\n target.removeAttribute('loading-number')\n } else {\n target.setAttribute('loading-number', loadingNumber.toString())\n }\n removeClass(target, 'el-loading-parent--hidden')\n }\n remvoeElLoadingChild()\n }\n function remvoeElLoadingChild(): void {\n vm.$el?.parentNode?.removeChild(vm.$el)\n }\n function close() {\n if (options.beforeClose && !options.beforeClose()) return\n\n const target = data.parent\n target.vLoadingAddClassList = undefined\n afterLeaveFlag.value = true\n clearTimeout(afterLeaveTimer)\n\n afterLeaveTimer = window.setTimeout(() => {\n if (afterLeaveFlag.value) {\n afterLeaveFlag.value = false\n destroySelf()\n }\n }, 400)\n data.visible = false\n\n options.closed?.()\n }\n\n function handleAfterLeave() {\n if (!afterLeaveFlag.value) return\n afterLeaveFlag.value = false\n destroySelf()\n }\n\n const elLoadingComponent = {\n name: 'ElLoading',\n setup() {\n return () => {\n const svg = data.spinner || data.svg\n const spinner = h(\n 'svg',\n {\n class: 'circular',\n viewBox: data.svgViewBox ? data.svgViewBox : '25 25 50 50',\n ...(svg ? { innerHTML: svg } : {}),\n },\n [\n h('circle', {\n class: 'path',\n cx: '50',\n cy: '50',\n r: '20',\n fill: 'none',\n }),\n ]\n )\n\n const spinnerText = data.text\n ? h('p', { class: 'el-loading-text' }, [data.text])\n : undefined\n\n return h(\n Transition,\n {\n name: 'el-loading-fade',\n onAfterLeave: handleAfterLeave,\n },\n {\n default: withCtx(() => [\n withDirectives(\n createVNode(\n 'div',\n {\n style: {\n backgroundColor: data.background || '',\n },\n class: [\n 'el-loading-mask',\n data.customClass,\n data.fullscreen ? 'is-fullscreen' : '',\n ],\n },\n [\n h(\n 'div',\n {\n class: 'el-loading-spinner',\n },\n [spinner, spinnerText]\n ),\n ]\n ),\n [[vShow, data.visible]]\n ),\n ]),\n }\n )\n }\n },\n }\n\n const vm = createApp(elLoadingComponent).mount(document.createElement('div'))\n\n return {\n ...toRefs(data),\n setText,\n remvoeElLoadingChild,\n close,\n handleAfterLeave,\n vm,\n get $el(): HTMLElement {\n return vm.$el\n },\n }\n}\n\nexport type LoadingInstance = ReturnType<
|