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

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

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