dm-vue3-ui/lib/loading/index.js

This Components Library will help get you started developing in Vue 3.

"use strict";const I="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiAgdmlld0JveD0iMCAwIDEwMCAzNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8Y2lyY2xlIGN4PSI4NCIgY3k9IjE4IiByPSIxMCIgZmlsbD0iI2M2YWVmZSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIwLjY3NTY3NTY3NTY3NTY3NTdzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjEwOzAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjIuNzAyNzAyNzAyNzAyNzAyNnMiIGNhbGNNb2RlPSJkaXNjcmV0ZSIga2V5VGltZXM9IjA7MC4yNTswLjU7MC43NTsxIiB2YWx1ZXM9IiNjNmFlZmU7IzUwMzZkMDsjNzg1N2ZjOyM5NDc0ZmQ7I2M2YWVmZSIgYmVnaW49IjBzIj48L2FuaW1hdGU+CjwvY2lyY2xlPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTgiIHI9IjEwIiBmaWxsPSIjYzZhZWZlIj4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIyLjcwMjcwMjcwMjcwMjcwMjZzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDswLjI1OzAuNTswLjc1OzEiIHZhbHVlcz0iMDswOzEwOzEwOzEwIiBrZXlTcGxpbmVzPSIwIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMSIgYmVnaW49IjBzIj48L2FuaW1hdGU+CiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjIuNzAyNzAyNzAyNzAyNzAyNnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSIwcyI+PC9hbmltYXRlPgo8L2NpcmNsZT48Y2lyY2xlIGN4PSI1MCIgY3k9IjE4IiByPSIxMCIgZmlsbD0iIzk0NzRmZCI+CiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMi43MDI3MDI3MDI3MDI3MDI2cyIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7MC4yNTswLjU7MC43NTsxIiB2YWx1ZXM9IjA7MDsxMDsxMDsxMCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC42NzU2NzU2NzU2NzU2NzU3cyI+PC9hbmltYXRlPgogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIyLjcwMjcwMjcwMjcwMjcwMjZzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDswLjI1OzAuNTswLjc1OzEiIHZhbHVlcz0iMTY7MTY7MTY7NTA7ODQiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuNjc1Njc1Njc1Njc1Njc1N3MiPjwvYW5pbWF0ZT4KPC9jaXJjbGU+PGNpcmNsZSBjeD0iODQiIGN5PSIxOCIgcj0iMTAiIGZpbGw9IiM3ODU3ZmMiPgogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjIuNzAyNzAyNzAyNzAyNzAyNnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTEuMzUxMzUxMzUxMzUxMzUxM3MiPjwvYW5pbWF0ZT4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeCIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMi43MDI3MDI3MDI3MDI3MDI2cyIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7MC4yNTswLjU7MC43NTsxIiB2YWx1ZXM9IjE2OzE2OzE2OzUwOzg0IiBrZXlTcGxpbmVzPSIwIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMSIgYmVnaW49Ii0xLjM1MTM1MTM1MTM1MTM1MTNzIj48L2FuaW1hdGU+CjwvY2lyY2xlPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTgiIHI9IjEwIiBmaWxsPSIjNTAzNmQwIj4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIyLjcwMjcwMjcwMjcwMjcwMjZzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDswLjI1OzAuNTswLjc1OzEiIHZhbHVlcz0iMDswOzEwOzEwOzEwIiBrZXlTcGxpbmVzPSIwIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMSIgYmVnaW49Ii0yLjAyNzAyNzAyNzAyNzAyN3MiPjwvYW5pbWF0ZT4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeCIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMi43MDI3MDI3MDI3MDI3MDI2cyIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7MC4yNTswLjU7MC43NTsxIiB2YWx1ZXM9IjE2OzE2OzE2OzUwOzg0IiBrZXlTcGxpbmVzPSIwIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMSIgYmVnaW49Ii0yLjAyNzAyNzAyNzAyNzAyN3MiPjwvYW5pbWF0ZT4KPC9jaXJjbGU+CjwhLS0gW2xkaW9dIGdlbmVyYXRlZCBieSBodHRwczovL2xvYWRpbmcuaW8vIC0tPjwvc3ZnPg==",i={name:"loading",mounted(i,e){if(e.value){i.style.position="relative";const e=document.createElement("div");e.className="loading-wrapper";const l=document.createElement("div");l.className="loading-spinner",e.appendChild(l);let t=i.getAttribute("element-loading-text");const n=i.getAttribute("element-loading-svg"),M=i.getAttribute("element-loading-background"),d=i.getAttribute("element-loading-color"),a=i.getAttribute("element-loading-size")||"large";if(t=null==t?"":t,t){const I=document.createElement("div");I.className="loading-text",I.textContent=t,e.appendChild(I)}if(n)l.innerHTML=n;else{const i=document.createElement("img");i.className=`loading-svg ${a}`,i.src=I,l.appendChild(i)}M&&(e.style.backgroundColor=M),d&&(l.style.borderColor=d,l.style.borderTopColor=d),i.appendChild(e),i.dataset.loading="true"}},updated(i,e){const l=e.value,t="true"===i.dataset.loading;if(l&&!t){i.style.position="relative";const e=document.createElement("div");e.className="loading-wrapper";const l=document.createElement("div");l.className="loading-spinner",e.appendChild(l);let t=i.getAttribute("element-loading-text");const n=i.getAttribute("element-loading-svg"),M=i.getAttribute("element-loading-background"),d=i.getAttribute("element-loading-color"),a=i.getAttribute("element-loading-size")||"large";if(t=null==t?"":t,t){const I=document.createElement("div");I.className="loading-text",I.textContent=t,e.appendChild(I)}if(n)l.innerHTML=n;else{const i=document.createElement("img");i.className=`loading-svg ${a}`,i.src=I,l.appendChild(i)}M&&(e.style.backgroundColor=M),d&&(l.style.borderColor=d,l.style.borderTopColor=d),i.appendChild(e),i.dataset.loading="true"}else if(!l&&t){const I=i.querySelector(".loading-wrapper");I&&(i.removeChild(I),delete i.dataset.loading)}}};if("undefined"!=typeof window&&window.document){const I=document.createElement("style");I.textContent="\n.loading-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction:column;\n  justify-content: center;\n  align-items: center;\n  z-index: 9999;\n  .loading-spinner {\n    .large {\n      width: 100px;\n    }\n    .middle {\n      width: 60px;\n    }\n    .small {\n      width: 40px;\n    }\n  }\n}\n/* 加载文案样式 */\n.loading-text {\n  font-size: 12px; /* 文字大小 */\n  color: rgba(255, 255, 255, 0.45); /* 文字颜色 */\n  margin-top: 5px; /* 上边距 */\n  text-align: center; /* 文字居中 */\n  /* 添加其他样式属性以满足你的需求 */\n}\n",document.head.appendChild(I)}module.exports=i;