ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 6.5 kB
Source Map (JSON)
{"version":3,"file":"directive.mjs","sources":["../../../../../src/components/ivue-loading/directive.ts"],"sourcesContent":["import { isRef, ref } from 'vue';\r\nimport { hyphenate, isObject, isString } from '@vue/shared';\r\nimport Loading from './loading';\r\n\r\n// ts\r\nimport { LoadingInstance } from './createLoadingComponent';\r\nimport { LoadingOptions } from './types/loading';\r\nimport type { Directive, DirectiveBinding, UnwrapRef } from 'vue';\r\n\r\nconst INSTANCE_KEY = Symbol('IvueLoading');\r\n\r\nexport type LoadingBinding = boolean | UnwrapRef<LoadingOptions>;\r\nexport interface ElementLoading extends HTMLElement {\r\n INSTANCE_KEY: {\r\n instance: LoadingInstance;\r\n options: LoadingOptions;\r\n };\r\n}\r\n\r\nconst createInstance = (\r\n el: ElementLoading,\r\n binding: DirectiveBinding<LoadingBinding>\r\n) => {\r\n // 当前实例\r\n const vm = binding.instance;\r\n\r\n // 获取绑定的props\r\n const getBindingProp = <K extends keyof LoadingOptions>(\r\n key: K\r\n ): LoadingOptions[K] =>\r\n isObject(binding.value) ? binding.value[key] : undefined;\r\n\r\n const resolveExpression = (key: any) => {\r\n const data = (isString(key) && vm?.[key]) || key;\r\n if (data) return ref(data);\r\n else return data;\r\n };\r\n\r\n // 获取prop\r\n const getProp = <K extends keyof LoadingOptions>(name: K) =>\r\n resolveExpression(\r\n getBindingProp(name) || el.getAttribute(`ivue-loading-${hyphenate(name)}`)\r\n );\r\n\r\n // 开启全屏\r\n const fullscreen =\r\n getBindingProp('fullscreen') ?? binding.modifiers.fullscreen;\r\n\r\n // 设置参数\r\n const options: LoadingOptions = {\r\n // 显示在加载图标下方的加载文案\r\n text: getProp('text'),\r\n // 自定义加载图标类名\r\n iconClass: getProp('iconClass'),\r\n // 图标 slot\r\n iconText: getProp('iconText'),\r\n // 遮罩背景色\r\n background: getProp('background'),\r\n // Loading 的自定义类名\r\n customClass: getProp('customClass'),\r\n // 开启全屏\r\n fullscreen,\r\n // 需要覆盖的 DOM 节点\r\n target: getBindingProp('target') ?? (fullscreen ? undefined : el),\r\n // 使遮罩插入至 DOM 中的 body 上\r\n body: getBindingProp('body') ?? binding.modifiers.body,\r\n // 锁定屏幕的滚动\r\n lock: getBindingProp('lock') ?? binding.modifiers.lock,\r\n };\r\n\r\n // 重置实例\r\n el[INSTANCE_KEY] = {\r\n options,\r\n instance: Loading(options),\r\n };\r\n};\r\n\r\n// 更新选项\r\nconst updateOptions = (\r\n // 新的选项\r\n newOptions: UnwrapRef<LoadingOptions>,\r\n // 原始选项\r\n originalOptions: LoadingOptions\r\n) => {\r\n for (const key of Object.keys(originalOptions)) {\r\n // 替换选项是否是 isRef\r\n if (isRef(originalOptions[key])) {\r\n originalOptions[key].value = newOptions[key];\r\n }\r\n }\r\n};\r\n\r\nconst vLoading: Directive<ElementLoading, LoadingBinding> = {\r\n // mounted\r\n mounted(el, binding) {\r\n if (binding.value) {\r\n createInstance(el, binding);\r\n }\r\n },\r\n // 更新\r\n updated(el, binding) {\r\n const instance = el[INSTANCE_KEY];\r\n\r\n // 是否需要更新\r\n if (binding.oldValue !== binding.value) {\r\n // 初始化实例\r\n if (binding.value && !binding.oldValue) {\r\n createInstance(el, binding);\r\n }\r\n // 更新选项\r\n else if (binding.value && binding.oldValue) {\r\n if (isObject(binding.value)) {\r\n updateOptions(binding.value, instance.options);\r\n }\r\n }\r\n // 清除是实例\r\n else {\r\n instance?.instance.close();\r\n }\r\n }\r\n },\r\n // 销毁\r\n unmounted(el) {\r\n // 关闭实例\r\n el[INSTANCE_KEY]?.instance.close();\r\n },\r\n};\r\n\r\nexport default vLoading;\r\n"],"names":[],"mappings":"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"}