整理baba山-勇敢把弹窗封装成组件

前面着急开发不敢封装，今天让我来康康封装过程会碰到什么问题

开始吧

<el-dialog
v-model="dialogVisible"
width="324"
align-center
:show-close="false"
:close-on-click-modal="false"
>
    <span class="dig_title">挑战成功</span>
    <div class="dig_img"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="digClose1" class="btn_l">退出游戏</el-button>
        <el-button type="primary" @click="digClose2" class="btn-r">
          再来一次
        </el-button>
      </div>
    </template>
</el-dialog>

结束了

<PassModal
  v-model="dialogVisible"
  @digClose1="digClose1"
  @digClose2="digClose2"
></PassModal>

import PassModal from "@/components/PassModal.vue";
const dialogVisible = ref(false);
const digClose1 = () => {
  dialogVisible.value = false;
  router.push("/");
};
const digClose2 = () => {
  dialogVisible.value = false;
  location.reload();
};

<template>
  <el-dialog
    width="324"
    align-center
    :show-close="false"
    :close-on-click-modal="false"
    v-model="show"
  >
    <div class="dig_title">挑战成功</div>
    <div class="dig_img"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="digClose1" class="btn_l">退出游戏</el-button>
        <el-button type="primary" @click="digClose2" class="btn-r">
          再来一次
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
});
const show = ref(false);
const { dialogVisible } = props;
const emits = defineEmits(["digClose1", "digClose2"]);
function digClose1() {
  emits("digClose1");
}
function digClose2() {
  emits("digClose2");
}
watch(
  () => dialogVisible,
  (oldVal, newVal) => {
    show.value = newVal;
  }
);
</script>

<style lang="scss" scoped>
.dig_title {
  color: #2f2e41;
  font-size: 18px;
  text-align: center;
}
.dig_img {
  width: 236.92px;
  height: 203px;
  margin: 10px auto 5px;
  background-image: url("../assets/images/ten/success.svg");
  background-repeat: no-repeat;
}
.dialog-footer {
  display: flex;
  justify-content: space-around;
  .btn_l {
    width: 126px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    color: #2f2e41;
    font-size: 20px;
    margin-right: 4px;
  }
  .btn-r {
    width: 126px;
    background: #6c63ff;
    border-radius: 100px;
    font-size: 20px;
    margin-left: 4px;
  }
}
</style>
<style scoped>
:deep(.el-dialog__body) {
  text-align: center;
}
</style>