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
8.4 KiB
1 line
8.4 KiB
4 months ago
|
{"version":3,"file":"loading.mjs","sources":["../../../../../../packages/components/loading/src/loading.ts"],"sourcesContent":["import {\n Transition,\n createApp,\n createVNode,\n defineComponent,\n h,\n reactive,\n ref,\n toRefs,\n vShow,\n withCtx,\n withDirectives,\n} from 'vue'\nimport { removeClass } from '@element-plus/utils'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\n\nimport type { UseNamespaceReturn } from '@element-plus/hooks'\nimport type { LoadingOptionsResolved } from './types'\n\nexport function createLoadingComponent(options: LoadingOptionsResolved) {\n let afterLeaveTimer: ReturnType<typeof setTimeout>\n // IMPORTANT NOTE: this is only a hacking way to expose the injections on an\n // instance, DO NOT FOLLOW this pattern in your own code.\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 const ns = (vm as any).ns as UseNamespaceReturn\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, ns.bm('parent', 'relative'))\n target.removeAttribute('loading-number')\n } else {\n target.setAttribute('loading-number', loadingNumber.toString())\n }\n removeClass(target, ns.bm('parent', 'hidden'))\n }\n removeElLoadingChild()\n loadingInstance.unmount()\n }\n function removeElLoadingChild(): void {\n vm.$el?.parentNode?.removeChild(vm.$el)\n }\n function close() {\n if (options.beforeClose && !options.beforeClose()) return\n\n afterLeaveFlag.value = true\n clearTimeout(afterLeaveTimer)\n\n afterLeaveTimer = setTimeout(handleAfterLeave, 400)\n data.visible = false\n\n options.closed?.()\n }\n\n function handleAfterLeave() {\n if (!afterLeaveFlag.value) return\n const target = data.parent\n afterLeaveFlag.value = false\n target.vLoadingAddClassList = undefined\n destroySelf()\n }\n\n const elLoadingComponent = defineComponent({\n name: 'ElLoading',\n setup(_, { expose }) {\n const { ns, zIndex } = useGlobalComponentSettings('loading')\n\n expose({\n ns,\n zIndex,\n })\n\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 : '0 0 50 50',\n ...(svg ? { innerHTML: svg } : {}),\n },\n [\n h('circle', {\n class: 'path',\n cx: '25',\n cy: '25',\n r: '20',\n fill: 'none',\n }),\n ]\n )\n\n const spinnerText = data.text\n ? h('p', { class: ns.b('text') }, [data.text])\n : undefined\n\n return h(\n Transition,\n {\n name: ns.b('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 ns.b('mask'),\n data.customClass,\n data.fullscreen ? 'is-fullscreen' : '',\n ],\n },\n [\n h(\n 'div',\n {\n class: ns.b('spinner'),\n },\n [spinner, spinnerText]\n ),\n ]\n ),\n
|