弹窗和Loading

芋圆社区 > 编程 > 天地图 > 弹窗和Loading

865

2023-08-24

Hey、小怪兽

• 首先增加一个自定义弹窗，需要在index.html里面写对应的dom元素：

<!-- 自定义消息弹窗 -->
<div id="customMessage"></div>

• index.css写上样式：

.customMessage {
  opacity: 0;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: #000000e0;
  font-size: 14px;
  padding: 10px 20px;
  z-index: 9999;
  border-radius: 8px;
  background-color: #ffffff;
  transition: opacity 0.5s ease;
}

.messageSuccess {
  color: #5eb11e;
  border: 1px solid #b7eb8f;
  background-color: #f6ffed;
}

.messageInfo {
  color: #1966ae;
  border: 1px solid #91caff;
  background-color: #e6f4ff;
}

.messageWarning {
  color: #c9a223;
  border: 1px solid #ffe58f;
  background-color: #fffbe6;
}

.messageError {
  color: #d01a0a;
  border: 1px solid #ffccc7;
  background-color: #fff2f0;
}

.customLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  z-index: 9999;
}

• 接着在JS里调用的时候也想和那些组件库一样，message.error(文本)或者message.success(文本)这样
• 因为就一层，直接用对象搞定，传入弹窗的类型和文本，通过类型添加不同的className，接着弹窗控制显示隐藏和加入文本，5秒后消失
• 这个是整个页面共用一个弹窗（也就是说如果1秒后出现弹窗，3秒后再出现一个弹窗，第二个弹窗会覆盖第一个弹窗并且第一个弹窗出现的5秒后都会消失，如果想多个弹窗就创建元素添加到body下面，分别控制显示隐藏）：

// 弹窗的方法
const showMessage = (text, className) => {
  const customMessageElement = document.getElementById("customMessage");
  customMessageElement.style.opacity = "1";
  customMessageElement.className = className;
  customMessageElement.innerHTML = `<p>${text}</p>`;
  setTimeout(() => {
    customMessageElement.style.opacity = "0";
  }, 5000);
};

const message = {
  success: (text) => {
    showMessage(text, "customMessage messageSuccess");
  },
  info: (text) => {
    showMessage(text, "customMessage messageInfo");
  },
  warning: (text) => {
    showMessage(text, "customMessage messageWarning");
  },
  error: (text) => {
    showMessage(text, "customMessage messageError");
  },
};

• 测试一下弹窗，顺便修复一下BUG，之前输入框如果什么都不输，直接点击搜索会报错：
• 这里加一个判断：

// 搜索地名
const searchPlace = () => {
  const keyWord = document.getElementById("searchPlaceInput").value;
  if (keyWord === "") {
    message.error("请输入地名");
    return;
  }
  localsearch.search(keyWord);
};

• 再次点击就会弹出刚才写的弹窗了：
• 接下去写一个自定义的Loading，因为特殊原因不能引用图片或者GIF，就自己用SVG写，写法网上很多的，首先还是回到index.html：

<!-- 自定义Loading-->
<svg viewBox="0 0 50 50" class="customLoading" id="customLoading">
  <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
</svg>

• index.css写上样式：

.path {
  stroke: #409eff; /*给画笔设置一个颜色*/
  stroke-width: 3; /*设置线条的宽度*/
  stroke-dasharray: 95, 126; /*设置实现长95，虚线长126*/
  stroke-dashoffset: 0; /*设置虚线的偏移位置*/
  animation: loading-dash 1.5s ease-in-out infinite;
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 126; /*实线部分1，虚线部分126*/
    stroke-dashoffset: 0; /*前面1/126显示实线，后面125显示空白*/
  }

  50% {
    stroke-dasharray: 95, 126; /*实线部分95，虚线部分126*/
    stroke-dashoffset: -31px; /*顺时针偏移31/126，即前31/126显示空白，后面3/4显示线条*/
  }

  to {
    stroke-dasharray: 6, 120; /*实线部分6，虚线部分120*/
    stroke-dashoffset: -120px; /*最后顺时针偏移120/126，即前120/126显示空白，后面6点显示线条部分*/
  }
}

• index.js直接写一个方法使用：

// Loading的显示隐藏
const handleLoading = (isShow) => {
  document.getElementById("customLoading").style.display = isShow ? "block" : "none";
};

• 打开地图，就可以看到蓝色的Loading：
• 关闭Loading的方法加在初始化的方法里面，如果自己拓展了加载点位的一些方法，就可以放到点位完成后：

const initMap = () => {
  ...其他代码
  initSearch();
  handleLoading(false);
};

上一篇：点击聚合点

下一篇：与安卓端交互

弹窗和Loading

回复