dm-vue3-ui
Version:
This Components Library will help get you started developing in Vue 3.
2 lines (1 loc) • 8.43 kB
JavaScript
"use strict";const t="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiAgdmlld0JveD0iMCAwIDEwMCAzNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8Y2lyY2xlIGN4PSI4NCIgY3k9IjE4IiByPSIxMCIgZmlsbD0iI2M2YWVmZSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIwLjY3NTY3NTY3NTY3NTY3NTdzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjEwOzAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjIuNzAyNzAyNzAyNzAyNzAyNnMiIGNhbGNNb2RlPSJkaXNjcmV0ZSIga2V5VGltZXM9IjA7MC4yNTswLjU7MC43NTsxIiB2YWx1ZXM9IiNjNmFlZmU7IzUwMzZkMDsjNzg1N2ZjOyM5NDc0ZmQ7I2M2YWVmZSIgYmVnaW49IjBzIj48L2FuaW1hdGU+CjwvY2lyY2xlPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTgiIHI9IjEwIiBmaWxsPSIjYzZhZWZlIj4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIyLjcwMjcwMjcwMjcwMjcwMjZzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDswLjI1OzAuNTswLjc1OzEiIHZhbHVlcz0iMDswOzEwOzEwOzEwIiBrZXlTcGxpbmVzPSIwIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMSIgYmVnaW49IjBzIj48L2FuaW1hdGU+CiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjIuNzAyNzAyNzAyNzAyNzAyNnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSIwcyI+PC9hbmltYXRlPgo8L2NpcmNsZT48Y2lyY2xlIGN4PSI1MCIgY3k9IjE4IiByPSIxMCIgZmlsbD0iIzk0NzRmZCI+CiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMi43MDI3MDI3MDI3MDI3MDI2cyIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7MC4yNTswLjU7MC43NTsxIiB2YWx1ZXM9IjA7MDsxMDsxMDsxMCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC42NzU2NzU2NzU2NzU2NzU3cyI+PC9hbmltYXRlPgogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIyLjcwMjcwMjcwMjcwMjcwMjZzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDswLjI1OzAuNTswLjc1OzEiIHZhbHVlcz0iMTY7MTY7MTY7NTA7ODQiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuNjc1Njc1Njc1Njc1Njc1N3MiPjwvYW5pbWF0ZT4KPC9jaXJjbGU+PGNpcmNsZSBjeD0iODQiIGN5PSIxOCIgcj0iMTAiIGZpbGw9IiM3ODU3ZmMiPgogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjIuNzAyNzAyNzAyNzAyNzAyNnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTEuMzUxMzUxMzUxMzUxMzUxM3MiPjwvYW5pbWF0ZT4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeCIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMi43MDI3MDI3MDI3MDI3MDI2cyIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7MC4yNTswLjU7MC43NTsxIiB2YWx1ZXM9IjE2OzE2OzE2OzUwOzg0IiBrZXlTcGxpbmVzPSIwIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMSIgYmVnaW49Ii0xLjM1MTM1MTM1MTM1MTM1MTNzIj48L2FuaW1hdGU+CjwvY2lyY2xlPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTgiIHI9IjEwIiBmaWxsPSIjNTAzNmQwIj4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIyLjcwMjcwMjcwMjcwMjcwMjZzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDswLjI1OzAuNTswLjc1OzEiIHZhbHVlcz0iMDswOzEwOzEwOzEwIiBrZXlTcGxpbmVzPSIwIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMSIgYmVnaW49Ii0yLjAyNzAyNzAyNzAyNzAyN3MiPjwvYW5pbWF0ZT4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeCIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMi43MDI3MDI3MDI3MDI3MDI2cyIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7MC4yNTswLjU7MC43NTsxIiB2YWx1ZXM9IjE2OzE2OzE2OzUwOzg0IiBrZXlTcGxpbmVzPSIwIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMTswIDAuNSAwLjUgMSIgYmVnaW49Ii0yLjAyNzAyNzAyNzAyNzAyN3MiPjwvYW5pbWF0ZT4KPC9jaXJjbGU+CjwhLS0gW2xkaW9dIGdlbmVyYXRlZCBieSBodHRwczovL2xvYWRpbmcuaW8vIC0tPjwvc3ZnPg==",e=(t,e)=>{if(t.trim().startsWith("<svg")){const i=document.createElement("div");i.innerHTML=t;const l=i.querySelector("svg");if(l){const t=l.attributes,i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("xmlns","http://www.w3.org/2000/svg");for(let e=0;e<t.length;e++){const l=t[e];"xmlns"!==l.name&&i.setAttribute(l.name,l.value)}const n=i.getAttribute("class")||"";for(i.setAttribute("class",`${n} loading-svg ${e}`);l.firstChild;)i.appendChild(l.firstChild);return i}}else{if(t.trim().startsWith("<path")){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");return i.setAttribute("xmlns","http://www.w3.org/2000/svg"),i.setAttribute("viewBox","0 0 50 50"),i.setAttribute("class",`loading-svg ${e}`),i.innerHTML=t,i}{const i=document.createElement("div");i.innerHTML=t;const l=i.firstElementChild;if(l){if(l instanceof SVGElement){const t=l.getAttribute("class")||"";return l.setAttribute("class",`${t} loading-svg ${e}`),l}{const i=document.createElementNS("http://www.w3.org/2000/svg","svg");return i.setAttribute("xmlns","http://www.w3.org/2000/svg"),i.setAttribute("viewBox","0 0 50 50"),i.setAttribute("class",`loading-svg ${e}`),i.innerHTML=t,i}}}}const i=document.createElementNS("http://www.w3.org/2000/svg","svg");return i.setAttribute("xmlns","http://www.w3.org/2000/svg"),i.setAttribute("viewBox","0 0 50 50"),i.setAttribute("class",`loading-svg ${e}`),i},i={name:"loading",mounted(i,l){if(l.value){i.style.position="relative";const l=document.createElement("div");l.className="loading-wrapper";const n=document.createElement("div");n.className="loading-spinner",l.appendChild(n);let I=i.getAttribute("element-loading-text");const s=i.getAttribute("element-loading-svg"),g=i.getAttribute("element-loading-background"),a=i.getAttribute("element-loading-color"),d=i.getAttribute("element-loading-size")||"large";if(I=null==I?"":I,I){const t=document.createElement("div");t.className="loading-text",t.textContent=I,l.appendChild(t)}if(s){const t=e(s,d);n.appendChild(t)}else{const e=document.createElement("img");e.className=`loading-svg ${d}`,e.src=t,n.appendChild(e)}g&&(l.style.backgroundColor=g),a&&(n.style.borderColor=a,n.style.borderTopColor=a),i.appendChild(l),i.dataset.loading="true"}},updated(i,l){const n=l.value,I="true"===i.dataset.loading;if(n&&!I){i.style.position="relative";const l=document.createElement("div");l.className="loading-wrapper";const n=document.createElement("div");n.className="loading-spinner",l.appendChild(n);let I=i.getAttribute("element-loading-text");const s=i.getAttribute("element-loading-svg"),g=i.getAttribute("element-loading-background"),a=i.getAttribute("element-loading-color"),d=i.getAttribute("element-loading-size")||"large";if(I=null==I?"":I,I){const t=document.createElement("div");t.className="loading-text",t.textContent=I,l.appendChild(t)}if(s){const t=e(s,d);n.appendChild(t)}else{const e=document.createElement("img");e.className=`loading-svg ${d}`,e.src=t,n.appendChild(e)}g&&(l.style.backgroundColor=g),a&&(n.style.borderColor=a,n.style.borderTopColor=a),i.appendChild(l),i.dataset.loading="true"}else if(!n&&I){const t=i.querySelector(".loading-wrapper");t&&(i.removeChild(t),delete i.dataset.loading)}}};if("undefined"!=typeof window&&window.document){const t=document.createElement("style");t.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 background-color: inherit;\n}\n.loading-spinner {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.loading-spinner .large {\n width: 100px;\n height: 100px;\n}\n.loading-spinner .middle {\n width: 60px;\n height: 60px;\n}\n.loading-spinner .small {\n width: 40px;\n height: 40px;\n}\n/* SVG 元素样式 */\n.loading-svg {\n width: 100%;\n height: 100%;\n}\n.loading-svg.large {\n width: 100px;\n height: 100px;\n}\n.loading-svg.middle {\n width: 60px;\n height: 60px;\n}\n.loading-svg.small {\n width: 40px;\n height: 40px;\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(t)}module.exports=i;