classroom/src/hooks/useDialogConfirm/dialogConfirm.vue

<!--
* @FileDescription: 提示确认类型弹窗
* @Author: 黄琪勇
* @Date:2024-03-20 19:18:13
-->
<template>
   <div class="dialogConfirm">
      <div class="close" @click="close"></div>
      <img class="headImg" v-if="props.modalData.headImg" :src="props.modalData.headImg" />
      <div class="textCon">
         <div class="text">{{ props.modalData.text }}</div>
      </div>
      <div v-if="filterBtnShow" class="dialogBtn">
         <img v-if="props.modalData.btnShow[1]" @click="cancel" src="@/img/useDialogConfirm/cancel.png" />
         <img v-if="props.modalData.btnShow[0]" @click="ok" src="@/img/useDialogConfirm/ok.png" />
      </div>
   </div>
</template>

<script setup lang="ts">
import { computed } from "vue"

const props = defineProps<{
   modalData: {
      text: string
      btnShow: [boolean?, boolean?]
      headImg?: string
   }
}>()

const emits = defineEmits<{
   (e: "onClose"): void
   (e: "onCancel"): void
   (e: "onOk"): void
}>()

const filterBtnShow = computed(() => {
   const { btnShow } = props.modalData
   return !!(btnShow[0] || btnShow[1])
})
function close() {
   emits("onClose")
}
function cancel() {
   emits("onCancel")
}
function ok() {
   emits("onOk")
}
</script>

<style lang="scss" scoped>
.dialogConfirm {
   padding-top: 36px;
   padding-bottom: 22px;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   .close {
      position: absolute;
      top: -14px;
      right: -16px;
      width: 42px;
      height: 44px;
      cursor: pointer;
      background: url("@/img/useDialogConfirm/close.png") no-repeat;
      background-size: cover;
      &:hover {
         background: url("@/img/useDialogConfirm/closeHover.png") no-repeat;
         background-size: cover;
      }
   }
   .headImg {
      width: 163px;
      height: 51px;
      position: absolute;
      left: 50%;
      top: -13px;
      transform: translate(-50%, 0);
   }
   .textCon {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      overflow: hidden;
      .text {
         font-size: 20px;
         color: #a04d11;
         line-height: 32px;
      }
   }
   .dialogBtn {
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      margin-top: 6px;
      > img {
         width: 170px;
         height: 51px;
         cursor: pointer;
         margin-left: 12px;
         &:hover {
            opacity: $opacity-hover;
         }
      }
   }
}
</style>