2024 数学建模高教社杯国赛（A题）| “板凳龙”舞龙队 | 建模秘籍&文章代码思路大全-CFANZ编程社区

弹窗组件封装

1. components下面新建SyDialog.vue组件

<template>
  <el-dialog
  :title="props.title"
  :model-value="props.visible"
  :width="props.width +'px'"
  :before-close="onClose"
  >
  <!-- :close-on-click-modal="false" 点击弹框外面不关闭弹框 -->
    <!-- 内容显示区 -->
    <div class="container" :style="{ height: height + 'px' }">
      <!-- 内容显示区插槽 -->
      <slot name="content"></slot>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click="onClose">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
//弹框数据类型
interface DialogProps {
  title: string;
  visible: boolean;
  width: number;
  height: number;
}
//接收父组件传递的参数
const props = withDefaults(defineProps<DialogProps>(), {
  title: "新增",
  visible: false,
  width: 630,
  height: 280,
});
//注册事件
const emit = defineEmits(["onClose", "onConfirm"]);
//弹框关闭
const onClose = () => {
  emit("onClose");
};
//弹框确定
const onConfirm = () => {
  emit("onConfirm");
};
</script>

<style lang="scss" >
.container {
  overflow-x: initial;
  overflow-y: auto;
}
.el-dialog {
  border-top-left-radius: 7px !important;
  border-top-right-radius: 7px !important;
  .el-dialog__header {
    width: 101.1%;
    margin-top: -16px;
    margin-left: -16px;
    padding: 13px;
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
    background-color: #0a2542 !important;
    .el-dialog__title {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
    }
  }
  .el-dialog__headerbtn {
    .el-dialog__close {
      color: #fff;
    }
  }
  .el-dialog__body {
    padding: 10px;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8eaec !important;
    padding: 10px;
  }
}
</style>

2. 在dashboard中测试

<template>
    <div>
        首页
        <el-button type="primary" size="default" @click="addBtn">新增</el-button>
        <SyDialog
            :title="dialog.title"
            :visible="dialog.visible"
            >
        </SyDialog>
    </div>
</template>

<script setup lang="ts">
import SyDialog from '@/components/SyDialog.vue';
import { reactive } from 'vue';

//定义弹框属性
const dialog = reactive({
    title: '新增',
    visible: false,
    
})

//按钮点击事件
const addBtn = () => {
    dialog.visible = true;
}
</script>

<style scoped lang="scss">

</style>

3.抽离弹框添加方式

新建文件夹hooks在src下
是重复使用的代码片段

弹窗hooks封装

import { reactive } from "vue";
export default function useDialog() {
    //弹框属性
    const dialog = reactive({
        title: "新增",
        visible: false,
        width: 630,
        height: 280
    });
    //弹框关闭
    const onClose = () => {
        dialog.visible = false
    };
    //弹框确定
    const onConfirm = () => {
        dialog.visible = false
    };
    //弹框显示
    const onShow = () => {
        dialog.visible = true;
    }
    return {
        dialog,
        onClose,
        onConfirm,
        onShow
    }
}

<template>
    <div>
        首页
        <el-button type="primary" size="default" @click="addBtn">新增</el-button>
        <SyDialog
            :title="dialog.title"
            :visible="dialog.visible"
            append-to-body
            :close-on-click-modal="false"
            @on-close="onClose"
            @on-confirm="onConfirm"
            >
            <template v-slot:content>111</template>
        </SyDialog>
    </div>
</template>

<script setup lang="ts">
import SyDialog from '@/components/SyDialog.vue';
// import { reactive } from 'vue';
import useDialog from '@/hooks/useDialog';
//获取弹框方法
const { dialog,onClose,onConfirm,onShow } = useDialog()


//定义弹框属性
// const dialog = reactive({
//     title: '新增',
//     visible: false,
    
// })

//按钮点击事件
const addBtn = () => {
    onShow()
};


</script>

<style scoped lang="scss">

</style>