延安市住建建设网站,找小程序,wordpress顶部菜单函数,制作网站的公司做网站去哪里找项目中弹框使用频繁,需要统一样式风格,此组件可以自定义弹框的头部样式和内容
一、文件结构如下: 二、自定义myDialog组件
需求#xff1a;
1.自定义弹框头部背景样式和文字
2.自定义弹框内容
3.基本业务流程框架 components/myDialog/index.vue完整代码#xff1a; 1.自定义弹框头部背景样式和文字
2.自定义弹框内容
3.基本业务流程框架 components/myDialog/index.vue完整代码
templatediv classsystem-user-dialog-containerel-dialog center align-center v-modelstate.isShow width769px closedialogRefreshtemplate #header{ titleClass }div :classtitleClass{{ state.title }}/div/templateel-form refformRef :rulesstate.rules :modelstate.formData sizedefault label-width100pxslot nameformPartdiv表单内容/div/slot/el-formtemplate #footerspan classdialog-footerel-button clickonCancel sizedefault取 消/el-buttonel-button typeprimary clickonSubmit(formRef) sizedefault确认/el-button/span/template/el-dialog/div
/templatescript setup langts namemyDialog
import { ElMessage, FormInstance } from element-plus;
import { reactive, ref } from vue;// 定义变量内容
const formRef ref();// 定义子组件向父组件传值/事件
const emit defineEmits([doSend]);const state: any reactive({isShow: false,formData: [],title: ,rules: {},
});// 取消
const onCancel () {state.isShow false;
};// 提交
const onSubmit async (formEl: FormInstance | undefined) {if (!formEl) return;//表格验证await formEl.validate(async (valid: any, fields: any) {if (valid) {emit(doSend);} else {ElMessage.warning(表格项验证失败,请检查);console.log(表格项验证失败!, fields);}});onCancel();
};const dialogRefresh () {// 清除校验规则formRef.value?.resetFields();// 重置表单内容state.formData [];
};/** formData表单数据* title标题* rules表单校验规则*/
const openDialog (formData: object, title: string, rules: object) {state.isShow true;state.formData formData;state.title title;state.rules rules;
};// 暴露变量
defineExpose({openDialog,
});
/script
style scoped langscss
:deep .el-dialog__header {width: 100%;height: 60px;background-color: #5e8dff;
}:deep .el-dialog__header .el-dialog__title {font-size: 20px;color: #fff;
}:deep .el-dialog__header .el-dialog__close {color: #fff;
}
/style三、使用组件
实现方法
1.通过插槽自定义弹框中的表单内容
2.父子组件传值
3.ref直接获取dom dialogDemo/dialog.vue完整代码
templatediv classsystem-dic-dialog-containermyDialog refmyDialogRef doSendhandleOperatetemplate #formPartdiv自定义表单内容/div/template/myDialog/div
/templatescript setup langts namesystemDicDialog
import myDialog from //components/myDialog/index.vue;
import { reactive, ref } from vue;// 定义子组件向父组件传值/事件
const emit defineEmits([refresh]);// 定义变量内容
const myDialogRef ref();
const state reactive({data: [],title: ,isAdd: false,rules: {// area: [{ required: true, message: 请选择区域, trigger: blur }],// alarmValueName: [{ required: true, message: 请输入告警值名称, trigger: blur }],// alarmValue: [{ required: true, message: 请输入告警值, trigger: blur }],// alarmValueUnit: [{ required: true, message: 请选择告警值单位, trigger: blur }],// alarmText: [{ required: true, message: 请输入告警提示语, trigger: blur }],},dialog: {isShowDialog: false,type: ,title: ,submitTxt: ,},
});const openDialog (row: any) {console.log(row, row);console.log(state.data, data);if (row) {state.title 修改;state.isAdd false;} else {state.title 新增;state.isAdd true;}myDialogRef.value.openDialog(state.data, state.title, state.rules);
};// 发请求
const handleOperate () {console.log(校验成功);state.isAdd ? doAdd() : doEdit();
};// 添加
const doAdd () {console.log(doAdd);clearFormData();emit(refresh);
};
// 修改
const doEdit () {console.log(doEdit);clearFormData();emit(refresh);
};// 清空表单信息
const clearFormData () {state.data [];
};// 暴露变量
defineExpose({openDialog,
});
/script添加或编辑成功后刷新页面 dialogDemo/index.vue完整代码
templatediv classnotice-bar-container layout-pdel-button typesuccess clickhandleOpenDialog点我打开弹框/el-buttonopenDialog refopenDialogRef refreshhandleRefresh/openDialog/div
/template
script setup langts namemakeDialogDemo
import openDialog from ./dialog.vue;
import { ref } from vue;const openDialogRef ref();const handleOpenDialog () {openDialogRef.value.openDialog();
};// 刷新页面
const handleRefresh () {};
/script
style langscss scoped/style
