当前位置：首页 > news >正文

对话框类别组件编写

news 来源：原创 2025/4/29 4:52:19

形如如图所示的对话框的编写
在这里插入图片描述

一、基本组件的定义

<template><div><el-dialogclass="cust-dialog":title="title":model-value="show":show-close="showClose":top="top+'px'":width="width+'px'":close-on-click-modal="false":draggable="true"@close="close"><!-- :close-on-click-modal="false" 控制点击对话框外部的遮罩层是否关闭对话框。 --><!-- :draggable="true"  控制对话框是否可拖动。 --><!-- @close：这是 Vue.js 的事件监听语法，用于监听 close 事件。y一旦触发close事件，就执行父组件中的事件 --><!-- 主题内容 --><divclass="dialog-body":style="{'max-height':maxHeight+'px',padding:padding+'px'}"><slot></slot></div><div class="dialog-footer"><!-- 按钮部分 --><el-buttontype="primary"@click="close"v-if="showCancel">取消</el-button><el-button:type="btn.type || 'primary'"@click="btn.click"v-for="btn in buttons">{{ btn.text }}</el-button></div></el-dialog></div>
</template><script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
// 需要传的参数
const props = defineProps({// 标题title: {type: String,},// 是否展示对话框show: {type: Boolean,default: false,},// 控制是否显示关闭按钮（右上角的关闭 X 按钮）。如果设置为 true，showClose: {type: Boolean,default: true,},// 是否展示取消框showCancel: {type: Boolean,default: false,},// 距离顶部的距离top: {type: Number,default: 50,},// 对话框宽度width: {type: String,// 父组件宽度的30%default: "30%",},// 需要展示的按钮buttons: {type: Array,},// 内边距padding: {type: Number,default: 15,},
});
// 定义最大高度
const maxHeight = window.innerHeight - props.tops - 100;
const emit = defineEmits();
const close = () => {emit("close");
};
</script>

二、在父组件中引入

<Dialog:show="dialogConfig.show":title="dialogConfig.title":buttons="dialogConfig.buttons"width="400px":showCancel="true"@close="dialogConfig.show = false"></Dialog><script setup>
import Dialog from "./Dialog.vue"; // 引入 Dialog 组件
</script>

三、定义接口

const api={}

四、定义dialog配置

const dialogConfig = ref({show: false,title: "标题",buttons: [{type: "primary",text: "确定",click: (e) => {submitForm();},},],
});

五、定义提交表单方法

const 父组件调用表单的方法=(data)=>{dialogConfig.value.show=truenextTick(()=>{//重置表单数据formDataRef.value.resetFields()//给formData.value开辟一个新的内存地址，再把data的值push到formData.value中formData.value=Object.assign({},data)  })
}
const submitForm=()=>{数据验证.value.validate(async(valid)=>{if(!valid){return}let params={}Object.assign(params,formData.value)let result = await proxy.Request({url:api.,params:params,})if(!result){return;}dialogConfig.value.show=false//TODO})
}