MyDialog.vue

src/components/dialogs/MyDialog.vue

@@ -0,0 +1,139 @@
+<template>
+  <div v-if="visible" class="clear_record_modal_container">
+    <div class="modal_content">
+      <!-- icon -->
+      <div v-if="'warning' === icon">
+        <img src="@/assets/img/icon/exclamation-cricle-red-fill.svg " />
+      </div>
+
+      <!-- content -->
+      <template v-if="null === content">
+        <slot></slot>
+      </template>
+      <p v-else class="tips">
+        <span>{{ content }}</span>
+      </p>
+      
+      <!-- action buttons -->
+      <div v-if="'confirm' === type" class="btns">
+        <div class="cancel" @click="actionCancel">取消</div>
+        <div class="ok" @click="actionOk">确定</div>
+      </div>
+      <div v-else-if="'info' === type" class="btns" style="justify-content: center;">
+        <div class="ok" @click="actionOk">确定</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+// type
+const type = ref(null);
+// visible
+const visible = ref(false);
+// icon
+const icon = ref(null);
+// content
+const content = ref(null);
+// confirm promise
+let confirmPromise = null;
+// expose
+defineExpose({confirm});
+
+// confirm
+function confirm( options ) {
+    return new Promise(resolve => {
+        confirmPromise = {resolve};
+        options = 'string' === typeof(options) ? {content:options} : options;
+        content.value = options.content || null;
+        visible.value = true;
+    });
+}
+
+// ok
+function actionOk() {
+    visible.value = false;
+    if ( 'confirm' === type.value ) {
+        confirmPromise.resolve(true);
+    }
+}
+
+// cancel
+function actionCancel() {
+    visible.value = false;
+    if ( 'confirm' === type.value ) {
+        confirmPromise.resolve(false);
+    }
+}
+</script>
+<style lang="scss" scoped>
+.clear_record_modal_container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .modal_content {
+      width: 476px;
+      height: 350px;
+      border-radius: 16px;
+      background: #ffffff;
+      padding: 52px 37px 55px 37px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .tips {
+        margin-top: 33px;
+        margin-bottom: 50px;
+        font-family: Source Han Sans CN;
+        font-size: 21px;
+        font-weight: normal;
+        letter-spacing: 0.04em;
+        color: #000000;
+        .red {
+          color: #fa1c1c;
+        }
+      }
+      .btns {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 362px;
+        .cancel {
+          width: 173px;
+          height: 68px;
+          border-radius: 34px;
+          background: #06518b;
+          font-family: Source Han Sans CN;
+          font-size: 23px;
+          font-weight: 350;
+          letter-spacing: 0em;
+          color: #ffffff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .ok {
+          width: 173px;
+          height: 68px;
+          border-radius: 34px;
+          background: #1f6397;
+          font-family: Source Han Sans CN;
+          font-size: 23px;
+          font-weight: 350;
+          letter-spacing: 0em;
+          color: #ffffff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+}
+</style>