通用提示

src/types/components.d.ts

@@ -97,6 +97,7 @@ declare module 'vue' {
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     VideoTagEdit: typeof import('./../components/VideoTagEdit/index.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
 }

src/utils/notification.ts

@@ -0,0 +1,78 @@
+import successImg from '@/assets/images/common/success.png';
+import warningImg from '@/assets/images/common/warning.png';
+const commonDuration: number = 3000;
+const notificationStyle = {
+  success: {
+    color: '#67c23a',
+    borderColor: '#f0f9eb',
+    backgroundColor: '#f0f9eb'
+  },
+  error: {
+    color: '#f56c6c',
+    borderColor: '#fef0f0',
+    backgroundColor: '#fef0f0'
+  }
+};
+let toastElement: HTMLElement | null = null;
+let timerId: number | null = null;
+
+// 创建提示元素
+const createNotificationElement = (type: string, msg: string) => {
+  const div = document.createElement('div');
+  div.id = 'notification-container';
+  div.style.position = 'absolute';
+  div.style.top = '20px';
+  div.style.left = '50%';
+  div.style.transform = 'translateX(-50%)';
+  div.style.backgroundColor = notificationStyle[type].backgroundColor;
+  div.style.border = '3px solid ' + notificationStyle[type].borderColor;
+  div.style.color = notificationStyle[type].color;
+  div.style.fontSize = '38px';
+  div.style.padding = '20px 40px';
+  div.style.borderRadius = '5px';
+  div.style.whiteSpace = 'nowrap';
+  div.style.zIndex = '9999';
+  div.style.opacity = '0';
+  div.style.transition = 'top 0.5s';
+  div.style.display = 'flex';
+  let html = '';
+  if (type === 'success') {
+    html += `<div style="background: url(${successImg}) no-repeat;background-size: 100% 100%;width: 60px;height: 60px;margin-right: 30px;"></div>`;
+  } else if (type === 'error') {
+    html += `<div style="background: url(${warningImg}) no-repeat;background-size: 100% 100%;width: 60px;height: 60px;margin-right: 30px;"></div>`;
+  }
+  html += `<div>${msg}</div>`;
+  div.innerHTML = html;
+  document.getElementsByClassName('bg')[0].appendChild(div);
+  div.style.opacity = '1';
+  return div;
+};
+
+// 移除提示元素
+const removeNotificationElement = (duration: number) => {
+  if (!!timerId) {
+    toastElement.remove();
+    toastElement = null;
+  }
+  timerId = setTimeout(
+    () => {
+      toastElement.remove();
+      toastElement = null;
+    },
+    duration ? duration : commonDuration
+  );
+};
+
+// 创建错误信息提示
+export const showErrorMsg: any = (msg: string, duration?: number) => {
+  if (!!toastElement) return;
+  toastElement = createNotificationElement('error', msg);
+  removeNotificationElement(duration);
+};
+
+// 创建错误信息提示
+export const showSuccessMsg: any = (msg: string, duration?: number) => {
+  if (!!toastElement) return;
+  toastElement = createNotificationElement('success', msg);
+  removeNotificationElement(duration);
+};