transmit_draw_bar_disinfection_front_end/src/components/MyModal.vue

<template>
  <div v-if="visible" class="clear_record_modal_container">
    <div class="modal_content">
      <div v-if="'warning' === props.icon">
        <img src="@/assets/img/icon/exclamation-cricle-red-fill.svg " />
      </div>

      <template v-if="'' === props.content">
        <slot></slot>
      </template>
      <p v-else class="tips">
        <span>{{ props.content }}</span>
      </p>

      <div v-if="'confirm' === props.type" class="btns">
        <div class="cancel" @click="actionCancel">取消</div>
        <div class="ok" @click="actionOk">确定</div>
      </div>
      <div v-else-if="'info' === props.type" class="btns" style="justify-content: center;">
        <div class="ok" @click="actionOk">确定</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
/** @var {Function} */
const emits = defineEmits(['update:visible', 'ok', 'cancel']);
/** @var {Object} */
const props = defineProps({
    visible: {type:Boolean, default:false}, // 是否显示
    content : {type:String, default:''}, // 提示内容
    type : {type:String, default:'confirm'}, // 类型
    icon : {type:String, default:''} // 图标
});
/** @var {Boolean} */
const visible = ref(props.visible);
// watch visible
watch(() => props.visible, val => visible.value = val);
// expose public functions
defineExpose({show});

// show dialog
function show() {
    emits('update:visible', true);
    visible.value = true;
}

// action ok
function actionOk() {
    emits('ok');
    emits('update:visible', false);
    visible.value = false;
}

// action cancel
function actionCancel() {
    emits('cancel');
    emits('update:visible', false);
    visible.value = 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>